自定义指令按钮权限js文件：提取三层list数据中的同一个属性值

数据格式（类似）：

 let arr = [
            {
                id: 1,
                name: "菜单一",
                perm: 'car:list',
                list: [
                    {
                        id: 2,
                        name: "陈毅",
                        perm: 'car:niu',
                        list: [
                            {
                                id: 6,
                                name: "罗永",
                                perm: 'car:month',
                            },
                            {
                                id: 12,
                                name: "马云",
                                perm: 'car:month',
                            },
                            {
                                id: 9,
                                name: "雷军",
                                perm: 'car:add66666666',

                            },
                        ]
                    },
                    {
                        id: 6,
                        name: "张三",
                        perm: 'car:delete'
                    }
                ]
            } ]

目标数据：perm属性的值集合

处理：

export function btnsPerms(val) {
	let arr = store.state.menus || []
	let newArr = []
	arr.forEach(item => {
		if (item.perm) {
			newArr.push(item.perm)
		}
		item.list.forEach(i => {
			if (i.perm) {
				newArr.push(i.perm)
			}
			if (i.list) {
				i.list.forEach(e => {
					if (e.perm) {
						newArr.push(e.perm)
					}
				})
			}
		})
	})
	const result = newArr.some((element) => element == val);
	return  result
}

去重做不做都行、、、、

然后在main.js里面配置自定义指令。

import  {btnsPerms}  from "./utils/index.js";

Vue.directive("permission", {
  inserted (el, binding) {
    let permission = binding.value; //获取到 v-permission的值
    if (permission) {
      let hasPermission = btnsPerms(permission);
      if (!hasPermission) { //移除Dom元素
        el.parentNode && el.parentNode.removeChild(el);
      }
    }
  }
});

在页面里：

v-permission="  'car:month' "