最簡單的Vue 按鈕權限控制

Vue 按鈕權限控制

關於vue按鈕權限控制,最簡單的不過與v-if。例如:v-if='scope.row.xxx === permission 大多數作法都是將判斷命令掛載到Vue實例上。 除了使用v-if判斷節點是否渲染,還有一種操做方式就是el.parentNode.removeChild(el)vue


本文講一講這兩種的實現方式web

先講需求

  1. 須要對用戶的增刪改查權限作存儲
  2. 在實際table中對用戶的操做按鈕進行隱藏或顯示

開始

Vuex 存儲permissionList

獲取權限列表 ps:此處的遍歷只爲處理後端返回數據後端

mainJs處理permissionList

carbon
carbon

將它掛載到實例上面

Vue.prototype.$_has = hasPermission編輯器

完成

在須要使用到權限控制的按鈕中,僅須要在他的屬性中加一條 v-if=$_has('permission') 實際上全部全部的按鈕權限判斷都是大同小異。都是很簡單的if-else邏輯。要麼在單獨的頁面中去寫 v-if,要麼就全局處理函數。函數

感謝閱讀,若是你有更好的實現方式,能夠寫在評論裏面哦~~~

本文使用 mdnice 排版spa

相關文章
相關標籤/搜索