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') 
    }
  },