功能如下

点击多选列表中的每一项即可以在table中隐藏和显示
没点击前

点击后

这样简单的动态设置table中的类表数据

想了2种实现方式
思路：声明2组相同的数据，一组是用于保持数据源不变，一组用于动态改变数据变化显示

<template>
  <div>
    <div :style="{ borderBottom: '1px solid #E9E9E9' }">
      <a-checkbox :indeterminate="indeterminate" :checked="checkAll" @change="onCheckAllChange">
        Check all
      </a-checkbox>
    </div>
    <br />
    <a-checkbox-group v-model="checkedList" :options="plainOptions" @change="onChange" />


    <a-table
    :columns="deletedata"
    :data-source="data"
    bordered
    size="middle"
    :scroll="{ x: 'calc(700px + 50%)', y: 240 }"/>
  </div>
</template>
<script>
const plainOptions = ['Other', 'Gender', 'Company'];
const defaultCheckedList = [];


const columns = [
  {
    title: 'Name',
    dataIndex: 'name',
    key: 'name',
    width: 100,
    fixed: false,  //设置是否固定表格
  },
  {
    fixed: false,  //设置是否固定表格
    title: 'Other',
    children: [
      {
        filterDropdownVisible:'false',
        title: 'Age',
        dataIndex: 'age',
        key: 'age',
        width: 200,
      },
      {
        title: 'Address',
        children: [
          {
            title: 'Street',
            dataIndex: 'street',
            key: 'street',
            width: 200,
          },
          {
            title: 'Block',
            children: [
              {
                title: 'Building',
                dataIndex: 'building',
                key: 'building',
                width: 100,
              },
              {
                title: 'Door No.',
                dataIndex: 'number',
                key: 'number',
                width: 100,
              },
            ],
          },
        ],
      },
    ],
  },
  {
    title: 'Company',
    fixed: false,  //设置是否固定表格
    children: [
      {
        title: 'Company Address',
        dataIndex: 'companyAddress',
        key: 'companyAddress',
        width: 200,
      },
      {
        title: 'Company Name',
        dataIndex: 'companyName',
        key: 'companyName',
      },
    ],
  },
  {
    fixed: false,  //设置是否固定表格
    title: 'Gender',
    dataIndex: 'gender',
    key: 'gender',
    width: 80,
  },
];

const data = [];
for (let i = 0; i < 100; i++) {
  data.push({
    key: i,
    name: 'John Brown',
    age: i + 1,
    street: 'Lake Park',
    building: 'C',
    number: 2035,
    companyAddress: 'Lake Street 42',
    companyName: 'SoftLake Co',
    gender: 'M',
  });
}

export default {
  data() {
    return {
      data,
      columns,  //用于保持数据源不变
      deletedata: columns,  //用于保留要删的数据可以做数据回滚的操作
      checkedList: defaultCheckedList,
      indeterminate: true,
      checkAll: false,
      plainOptions,
    };
  },
  methods:{
    onChange(checkedList) {
      //单独选择的功能的
      this.indeterminate = !!checkedList.length && checkedList.length < plainOptions.length;
      this.checkAll = checkedList.length === plainOptions.length;
      //只需控制checkedList的数据渲染
      //对表格数据修改
      var _that = this
      this.deletedata = JSON.parse(JSON.stringify(this.columns))  //这样处理防止传的是地址地址
      let deletearray = JSON.parse(JSON.stringify(this.columns))
      checkedList.forEach(item => {
        for(let i = 0; i<deletearray.length;i++){
          //判断是要取消显示那一条，并且删除数据中没有这个数据的记录
          if(item === deletearray[i].title){
            deletearray.splice(i,1)
            _that.deletedata= deletearray
          } 
        }
      });

    },
  },
  
}
</script>
<style scoped>

</style>