vue antd根据权限控制表格显示的列

场景：根据不同用户的权限，展示表格的列各不相同。

实现：动态变更表格列的配置columns。

初始化的时候，只需要控制应该展示那些列就好。

  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' },
    },
  ];

 初始化的时候，根据权限控制是否展示操作列。

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