Ant design vue 表格的字段根据角色等条件显隐

一、 首先在columns中设置所有字段信息，例：

    columns: [
            {
              title: '序号',
              dataIndex: '',
              key: 'rowIndex',
              align: 'center',
              customRender: function (t, r, index) {
                return parseInt(index) + 1
              },
            },
            {
              title: '任务描述',
              align: 'center',
              dataIndex: 'alarmTitle',
              customRender: (t) => ellipsis(t)
            },
             {
              title: '接收人员',
              align: 'center',
              dataIndex: 'realName',
               customRender: (t) => ellipsis(t)
             },
             {
              title: '下发人员',
              align: 'center',
              dataIndex: 'xiafaName',
              customRender: (t) => ellipsis(t)
            },
            {
              title: '任务下发单位',
              align: 'center',
              dataIndex: 'lordSendUnitTxt',
            },
             {
              title: '操作',
              dataIndex: 'action',
              align: 'center',
              fixed: 'right',
              scopedSlots: { customRender: 'action' },
            },
          ]

其中下发人员和接收人员字段是根据角色来显示隐藏的【当角色是isywgl 时不展示接收人员字段realName，非isywgl角色不展示下发人员字段xiafaName】

created() {
 　　// 用户在登录时会将角色信息等存到localStorage，所以这里直接从localStorage拿到用户的角色信息
    this.isywgl = localStorage.getItem('roleArr').indexOf('ywgl')
  },
  mounted(){
　　if (this.isywgl ==-1) { 
 　　　//通过角色过滤掉需要隐藏的字段
      this.columns = this.columns.filter(item => item.dataIndex !== 'xiafaName') 
    }else{
      this.columns = this.columns.filter(item => item.dataIndex !== 'realName') 
    }
  },

标签：vue,center,title,显隐,align,Ant,dataIndex,customRender,columns
来源： https://www.cnblogs.com/YiFeng-Liu/p/15071835.html