Vue antd controls the columns displayed in the table according to permissions

Scenario: According to the permissions of different users, the columns of the display table are different.

Implementation: Dynamically change the configuration columns of the table columns.

When initializing, you only need to control which columns should be displayed.

  const columns = [
    {
        title: '序号',
        align:'center',
        customRender:(t,r,index)=> {
          return parseInt(`${( index+1)}`);
        }
    },
    {
        title: '编号',
        dataIndex: 'code',
        key: 'code',
        align:'center',
        scopedSlots: { customRender: 'detail' },
    },
    {
        title: '年度',
        dataIndex: 'dcnd',
        key: 'dcnd',
        align:'center',
    },
    {
        title: '所属体系',
        dataIndex: 'lxdcfl__sstx',
        key: 'lxdcfl__sstx',
        align:'center',
    },
    {
        title: '内容',
        dataIndex: 'lxdcnr',
        key: 'lxdcnr',
        align:'center',
        customRender:((text, record, index)=>{
          let dcnr = text.split('H%4v$V').join('，');
          if(dcnr.length){
            return(
              dcnr.length>15 ? dcnr.substring(0,15)+"...": dcnr
            )        
          }else{
            return ''
          }   
        })
    },
    {
        title: '调查状态',
        dataIndex: 'dczt',
        key: 'dczt',
        align:'center',
        scopedSlots: { customRender: 'dczt' },
    },
    {
        title: '操作',
        dataIndex: 'operation',
        key: 'operation',
        align:'center',
        scopedSlots: { customRender: 'operation' },
    },
  ];

 When initializing, control whether to display the operation column according to the permission.

  mounted() {
    // 根据权限来删减表头，xzqjb为1的时候不显示操作列
    if (this.$common.getCookie('xzqjb') == 1) { // xzqjb 0 *** 1 **
      this.columns = this.columns.filter(item => item.dataIndex !== 'operation') // 控制操作列是否展示
    }
    this.init();
  },