先上图看看是不是你想找的：

背景：

        使用vue3+antd4.x实现表格列过多时，隐藏或展示部分列。

实现：

        在操作列增加一个筛选图标，将所有的表头放在图标的下拉框内，每个表头都是多选框。那控制列的显示和隐藏就相当于是重新对表格列的渲染了。

下列代码已亲测，放心食用，如有问题请反馈，感谢！

<a-table
          :row-selection="rowSelection"
          :dataSource="dataSource"
          :columns="columns"
          :scroll="{ x: 900 }"
          :pagination="false"
      >
      // customFilterDropdown占位置
        <template #customFilterDropdown="{  }">
          <div style="padding: 15px;height: 500px;overflow-y: auto;">
          // 循环所有的表头
            <template v-for="(item, i) in selectTitleList" :key="i">
              <div style="padding: 5px;">
              // 当勾选框改变时触发selectTitle方法
                <a-checkbox v-model:checked="item.checked" @change="selectTitle(item)">{{item.label}}</a-checkbox>
              </div>
            </template>
          </div>
        </template>
      </a-table>


<script setup lang='ts'>
import {ref, reactive} from 'vue'
const selectTitleList = ref([])
const columns = reactive([])

// res.data.dataList是从后台拿的表格的表头数据,即每一列
res.data.dataList.forEach((e, i) => {
    // 所有列
    columns.push({
        title: e.paramName,
        dataIndex: e.paramKey,
        width: 150
      })
      // 拿到除序号和操作列的每一列
    selectTitleList.value.push({
          label: e.paramName,
          value: e.paramKey,
          text: e.paramName,
          checked: true, // 可以和后端约定，这里全部为true
          index: i + 1,
          title: e.paramName,
          dataIndex: e.paramKey
      })
    })
    
    columns.unshift(
        {
          title: '序号',
          dataIndex: 'key',
          key: 'key',
          width: 80
        })
    columns.push(
        {
          title: '操作',
          dataIndex: 'detail',
          key: 'address',
          width: 130,
          fixed: 'right',
          customFilterDropdown: true // 在操作列增加筛选的图标
        })


        
const selectTitle = (val) => {
  columns.splice(columns.length - 1 , 1) // 先删除操作列,避免在勾选时操作列增多
  if (!val.checked) { // 不勾选
    let obj = columns.filter(e => e.title !== val.label)
    columns.length = 0
    Object.assign(columns, obj) // 推荐使用ref定义,不然reactive被重新赋值后就失去了响应式
  } else { // 勾选
    val.width = 150
    val.dataIndex = val.value
    val.title = val.label
    columns.splice(val.index, 0, val)
  }
  columns.push(// 单独增加操作列
    {
      title: '操作',
      dataIndex: 'detail',
      key: 'address',
      width: 130,
      fixed: 'right',
      customFilterDropdown: true
    })
}
</script>

其实，你隐藏部分列后，页面一刷新就会重置的，至于要保留状态的话，可以根据实际情况和后端聊一下，去调接口，把每个checked传后后端，页面一刷新就不会被重置了。