Vue根据权限获取页面按钮显示与隐藏
2022-08-12 15:27:48 更新 浏览量: 357
| 上一章：Vue使用sm4加密解密 | 下一章：错误信息放到一个.txt文件 |
Vue根据权限获取页面按钮显示与隐藏
例如后台有返回数据，插件名称是hasBtn.js。如下所示：
实例
export function hasBtn(val) {
var array= [{ btns: [{id: 1,btn: 'resBtn1'}], hobby: '1', mj: '12' },
{ btns: [{id:2, btn: 'resBtns'}], hobby: '2', mj: '13' }]
let myBtns = [] // 存放array数组里面的btns
let resList = [] //最终返回的数据
for (let item of array) {
if (item.btns && item.btns.length >0) {
myBtns.push(...item.btns)
}
}
console.log(myBtns)
if (myBtns && myBtns.length > 0) {
for (let btns of myBtns) {
if (btns.btn) {
resList.push(btns)
}
}
return resList.indexOf(val)> -1
} else {
return false
}
}
console.log(myBtns)的打印结果如下图所示：
第二步：我们需要在vue项目中的main.js引入我们封装的组件
我们的hasBtn.js在src下面的common文件夹下存放
import {hasBtn} from '@/common/hasBtn.js'
Vue.prototype.hasBtn = hasBtn
第三步：在需要使用的界面使用v-if='hasBtn('resBtn1')'
resBtn1是刚才数组中btns里面的一个按钮编号，具体的以项目返回数据为准
陕公网安备 61012402000223号