标签：el 自定义 btnList button permission 校验 item 权限

通过自定义指令对button进行权限的校验
场景：左侧菜单栏通过调接口获取，每一个菜单下的还有该菜单下的button的权限操作，在mentType为2时，该children就是button权限列表
1.先获取所有有权限的buttom
import store from "@/store"
export function setPermission (menuList) {
let btnList = []
fn = (data) => {
data.forEach(item => {
if (mentType === 2) {
btnList.push(...item.children)
}
if (item.children && item.children.length) {
fn(item.children)
}
})
}
fn(menuList)
//btnList就是含有权限的butoon，然后存到仓库中
store.$commit("user/setBtnList",
btnList.map(item => item.permission) //permission 为有权限button的名称
)
}

2.校验是否有权限
export function hasBtnPermission (val) {
let btnList = store.state.user.btnList
return btnList.includes(val)
}

3. 自定义指令v-permission
注意：自定义指令要在main.js引进 import "@/module/directive/permission.js"
import hasBtnPermission from "index.js"
import Vue from "vue"
Vue.directive("permission", {
inserted: function (el, binding) {
let { permission, active} = binding.value
let hasPermission = hasBtnPermission (permission)
if (actice === 'delete' && !hasPermission) {
//删除该节点
el.parentNode && el.parentNode.removeChild(el)
} else if (!hasPermission) {
//添加属性，给button disabled
el.disabled = true
}
}
})

4.页面的使用
<el-button
@click ="handleClick"
v-permission="{ permission: 'import', actice: 'delete'}"

导入

标签：el,自定义,btnList,button,permission,校验,item,权限
来源： https://www.cnblogs.com/zw100655/p/16632270.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。