IVIEW-ADMIN table 列权限隐藏

iview-admin table 权限列隐藏或出现

通过改变列的权限值可控制权限列的显示或隐藏

1. 引入table组件columns中新增一个参数‘checkAccess’

columns: [
        {
        	title: '序号', 
        	width:60, 
        	align:'center',
        	render: (h, params) =>{
        		let pageIndex = params.index + (this.currentpage - 1)*this.pageSize + 1
        		return h('span', pageIndex)
        	}
        },
        {title: '键', key: 'key', sortable: true, align: 'center'},
        {title: '值', key: 'value', sortable: true, align: 'center', checkAccess: [3]},
        {title: 'Cyberark对象名', key: 'cyberark', sortable: true, align: 'center'},
        {title: '密文管理', key: 'key', sortable: true, align: 'center', checkAccess: [1]},
        {title: '备注信息', key: 'remark', sortable: true, align: 'center'}
      ]

2.用户登录时，后台返回数据加上用户的权限‘access’

admin: {
    name: 'admin',
    user_id: '2',
    token: 'admin',
    avator: '@/assets/images/profilePic.png',
    access: [2]
  }

3.在table组件里对columns进行处理

handleColumns (columns) {
    	// 遍历处理列数组list，判断查询是否是权限选择列，如果是权限列，判断角色是否有权限，有则显示，无则隐藏
      columns.map((item, index) => {
      	let checkAccess = item.checkAccess
      	let access = this.$store.state.user.access
      	if(checkAccess){
      		// 判断角色是否有权限，checkAccess是列传过来的值，access是用户登录时后台返回值
					if (checkAccess.indexOf(Number(access)) > -1) {
						console.log(index)
					} else {
						columns.splice(index, 1)			
					}
      	}
    	})
      this.insideColumns = columns.map((item, index) => {
        let res = item
        if (res.editable) res = this.suportEdit(res, index)
        if (res.key === 'handle') res = this.surportHandle(res)
        return res
      })
    }