一、antd vue根据条件（权限）控制table显示得列

在实际开发得时候，前端往往需要控制权限，这里我们不讨论如何去实现权限，只说明，如何通过权限或者其他得条件控制表格展示列，即根据每个用户不同，在同一个table里，看到列不同

问题分析

首先目前，官方还没给出隐藏列得api，这里我得思路是，动态得变更列头数组columns，注意，这里使用字定义表头（slot）暂时无法实现。

问题解决

初始化得时候，只需要控制应该展示那些列就好列数据如下

columns: [
        {
          title: '序号',
          width: '80px',
          customRender: (text, record, index) => {
            return (
              <div>
                {index + 1}
              </div>
            )
          }
        },
        {
          title: '联系人',
          dataIndex: 'name'
        },
        {
          title: '客户公司',
          dataIndex: 'userCompanyName'
        },
        {
          title: '联系方式',
          dataIndex: 'phone'
        },
        {
          title: '单价(元)',
          dataIndex: 'price'
        },
        {
          title: '服务名称',
          dataIndex: 'serviceName'
        },
        {
          title: '服务类别',
          dataIndex: 'serviceCategoryName'
        },
        {
          title: '服务公司',
          dataIndex: 'serveCompanyName'
        },
        {
          title: '客户经理', // 这个字段需要控制动态展示
          dataIndex: 'serveAccountName'
        },
        {
          title: '创建时间',
          dataIndex: 'createdTime',
          customRender: (text) => {
            return (
              <div>
                { moment(text).format('YYYY-MM-DD HH:mm')}
              </div>
            )
          }
        },
        {
          title: '操作',
          width: '200px',
          scopedSlots: { customRender: 'action' }
        }
      ]

这里我要根据权限控制，是否展示客户经理一列，所以我需要再mounted里面进行如下操作

  mounted () {
    // 此处根据权限来删减表头
    if (!this.$auth('admin')) { // this.$auth('admin')这个方法是我判断权限得，返回值为true 或者false
      this.columns = this.columns.filter(item => item.dataIndex !== 'serveAccountName') // 控制客户经理列是否展示
    }
  },

二、ant-design-vue a-table通过字段的状态展示对应的文字，三元表达式多个条件判断，后端返数字，前端展示文字

实现方式1：

在data的columns中，通过scopedSlots渲染名叫type的插槽

columns: [
       {
         title: '类型',
         dataIndex: 'CertificationType',
         scopedSlots: { customRender: 'type' },
       },
     ],

在a-table中

  <span slot="type" slot-scope="text,record">
          <span v-if="record.CertificationType==0">企业</span>
          <span v-else-if="record.CertificationType==1">个人</span>
          <span v-else-if="record.CertificationType==null">- -</span>
</span>

实现方式2:

只需要在data的columns中通过customRender 进行三元表达式多个条件判断即可

 {
          title: '类型',
          dataIndex: 'CertificationType',
          customRender: (text, record, index) => text?(text == 0 ? '企业' : '个人'):'--',
},

实现方式3:

 columns: [  
  {
      title: '类型',
      dataIndex: 'CertificationType',
      scopedSlots: { customRender: 'type' },
    },
  ],

在a-table中

 <span slot="type" slot-scope="text">{{ auditState[text] }}</span>

在data中

  auditState:{
         0: "企业",
         1: "个人",  
         2："--"
      },

antd vue根据条件（权限）控制table显示得列，ant-design-vue a-table通过字段的状态展示对应的文字