antd表格列自定义显示与隐藏

效果图：

相关定义：

 ckValues: [],  //checkgroup设置值
      chkAll: true,  //全选
      indeterminate: false, //模糊状态
      poped: false  //弹窗显示
      columns: [], //显示列
      columnList: [], //全部列

数据准备：

  postAction('/data.meta/metaSet/queryPage', p).then(res => {
        if (res.success) {
          this.columnList = res.result.columnList
          this.columnList.forEach(col => {
            col.value = col.dataIndex  //设置value值，用于checkedgroup
          })
          if (this.ckValues.length == 0) {
            this.createChGroupValue() //初始全部选中
          }
          this.createColumns() //生成显示列
          this.setDelCol() //设置删除标记列的显示样式

          let primaryKey = this.columns.find(f => f.primaryKey == true)
          if (primaryKey) {
            this.primaryKey = primaryKey.dataIndex
          }
          this.dataSource = res.result.pageRecords.records
          if (res.result.pageRecords.total) {
            this.ipagination.total = res.result.pageRecords.total
          }
        } else {
          this.$message.error(res.message)
        }
      }).finally(() => {
        this.loading = false
      })

弹窗及列选择控制方法：

 createChGroupValue() {
      this.ckValues = []
      this.columnList.forEach(col => {
        this.ckValues.push(col.value)
      })
    },
    ckChange(checkedList) {
      this.indeterminate = !!checkedList.length && checkedList.length < this.columnList.length;
      this.chkAll = checkedList.length === this.columnList.length;
    },
    ckAllChange(e) {
      this.chkAll = e.target.checked
      this.indeterminate = false
      if (this.chkAll) {
        this.createChGroupValue()
      } else {
        this.ckValues = []
      }
    },
    createColumns() {
      if (this.ckValues.length == 0) {
        this.$message.error('请至少留下一列')
        return
      }
      this.columns = []
      this.ckValues.forEach(item => {
        let col = this.columnList.find(f => f.dataIndex == item)
        if (col) {
          this.columns.push(col)
        }
      })

    }

html使用：

 <a-popover v-model="poped" trigger="click" placement="leftBottom">
              <template slot="title">
                <a-checkbox :checked="chkAll" :indeterminate="indeterminate" @change="ckAllChange">全部</a-checkbox>
              </template>
              <template slot="content">
                <a-checkbox-group v-model="ckValues" :options="columnList"
                                  @change="ckChange" style="width: 120px;">
                  　<span slot="label" :title="option.title" slot-scope="option">{{ option.title }}</span>
                </a-checkbox-group>
                <a-divider style="margin:5px; "/>
                <a-space>
                  <a-button type="primary" size="small" @click="createColumns">确认</a-button>
                  <a-button type="primary" size="small" @click="poped=false">取消</a-button>
                </a-space>
              </template>
              <a-button type="primary" icon="table" shape="circle"/>
            </a-popover>

checkboxgroup 绑定的是对象数组 :options=“columnList” ，然后用span slot=“label” 修改显示内容，value值是获取数据后就设置了的。