请教defaultHidden 怎么实现对BasicTable组件二级表头的某列隐藏

[tuin77]

Subject of the feature

我想实现控制二级表头隐藏显示 列表columns已更改 但页面无反应
重写 src/components/Table/src/hooks/useColumns.ts 方法setColumns

const newColumns: BasicColumn[] = []
cacheColumns.forEach((item) => {
  if (item.children?.length) {
    newColumns.push({
      ...item,
      children: item.children.map((i) => ({
        ...i,
        defaultHidden: !columnKeys.includes(i.dataIndex?.toString() || (i.key as string)),
      })),
    })
  } else {
    newColumns.push({
      ...item,
      defaultHidden: !columnKeys.includes(item.dataIndex?.toString() || (item.key as string)),
    })
  }
})

重写 src/components/Table/src/components/settings/ColumnSetting.vue 方法getTableColumns
在列设置（table右上角小弹框） 初始化 显示所有的一级表头和二级表头

let ret any
table.getColumns({ ignoreIndex: true, ignoreAction: true }).forEach((item: any) => {
  if (item.children?.length) {
    ret = ret.concat(
      item.children.map((i) => ({
        ...i,
        label: (i.title as string) || (i.customTitle as string),
        value: (i.dataIndex || i.title) as string,
      })),
    )
  } else {
    ret.push({
      ...item,
      label: (item.title as string) || (item.customTitle as string),
      value: (item.dataIndex || item.title) as string,
    })
  }
})
return list

Describe your issue here.

Problem

If the feature requests relates to a problem, please describe the problem you are trying to solve here.

Expected behaviour

期望点击列设置实现对BaseTable组件二级表头列控制显示与隐藏

What should happen? Please describe the desired behaviour.

Alternatives

What are the alternative solutions? Please describe what else you have considered?
想知道实现二级列表隐藏还需要修改哪些地方

[xachary]

提了个 pr（https://github.com/vbenjs/vue-vben-admin/pull/3561/files）尝试优化 src\components\Table\src\hooks\useColumns.ts 解决上述问题（不影响 setColumns、getTableColumns）

ColumnSetting 依旧只能控制首层，否则就复杂多了。

根据官方 demo 修改的测试用例：

src\views\demo\table\MultipleHeader.vue

<template>
  <div class="p-4">
    <BasicTable @register="registerTable">
      <template #toolbar>
        <a-button type="primary" @click="changeColumns">
          隐藏一级表头“ID"、二级表头“结束时间”
        </a-button>
      </template>
    </BasicTable>
  </div>
</template>
<script lang="ts" setup>
  import { BasicTable, useTable } from '@/components/Table';
  import type { BasicColumn } from '@/components/Table';
  import { cloneDeep } from 'lodash-es';

  import { demoListApi } from '@/api/demo/table';

  const defaultColumns: BasicColumn[] = [
    {
      title: 'ID',
      dataIndex: 'id',
      width: 200,
    },
    {
      title: '地址',
      dataIndex: 'address',
      sorter: true,
      children: [
        {
          title: '开始时间',
          dataIndex: 'beginTime',
          width: 120,
        },
        {
          title: '结束时间',
          dataIndex: 'endTime',
          width: 120,
          children: [
            {
              title: '三级表头',
              dataIndex: 'beginTime',
              width: 120,
            },
          ],
        },
      ] as BasicColumn[],
    },
  ];

  const [registerTable, { setColumns }] = useTable({
    title: '多级表头示例',
    api: demoListApi,
    columns: defaultColumns,
    showTableSetting: true,
  });

  function changeColumns() {
    let changedColumns = cloneDeep(defaultColumns);
    // 隐藏一级表头“ID"
    changedColumns.find((o) => o.dataIndex === 'id')!.defaultHidden = true;
    // 隐藏二级表头“结束时间”
    changedColumns
      .find((o) => o.dataIndex === 'address')!
      .children!.find((o) => o.dataIndex === 'endTime')!.defaultHidden = true;
    setColumns(changedColumns);
  }
</script>