Vue antdは、権限に従ってテーブルに表示される列を制御します

シナリオ：さまざまなユーザーの権限に応じて、表示テーブルの列が異なります。

実装：テーブル列の構成列を動的に変更します。

初期化するときは、表示する列を制御するだけで済みます。

  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();
  },