Table 组件 支持多 treeColumnsName 属性该怎么做？

[ggbdpq]

我查阅了相关了官方文档，得知treeColumnsName 是一个字符串形式，查看了相关源代码，在/shineout/src/Table/index.js 得知 getTreeColumnsName函数只获取数组第一项的 treeColumnsName 的树形，具体代码如下：

getTreeColumnsName() {
  const columns = this.getFilteredColumn()
  if (!Array.isArray(columns)) return undefined
  const has = columns.filter(v => typeof v.treeColumnsName === 'string')
  if (has.length === 0) return undefined
  return has[0].treeColumnsName
}

​ 比如有这样一种业务需求，业务方要求从两个不同的维度在同一张Table树形表格数组展示一键展开和一键收起的功能，好比第一列是【二级部门】，第二列是【预算分类】，页面展示效果是树形结构一级展示的是第一列二级部门的称，它并没有对应的预算分类名称，除了一级之外的二级、三级、四级、五级它们不展示部门列的数据，只展示预算分类列的数据。想实现这种需求的话，明显是需求至少两项 treeColumnsName 的支持。

​ 或者，能不能提供一个参数，用来隐藏对应列显示字段为空的icon标志，也就是前面的【+号】和【-号】。因为这种场景本身比较特殊。我在这两列获取一样的key数组，设置为allCateKeys，借此控制展开与收起功能。在没有支持至少两个 treeColumnsName 的前提下，我可以动态切换 columns对应列的 treeColumnsName 字段。这样也能实现类似同一棵树同时支持不同列的展示效果。

const [checked, setChecked] = useState(true);

const columns: ITableColumnItem[] = [
    {
      title: '二级部门',
      render: (d) => (d?.deptName ? d?.deptName : null),
      align: 'center',
      width: 50,
      // rowSpan: (a, b) => a.deptName === b.deptName,
      treeColumnsName: !checked && 'childList',
    },
    {
      title: '预算分类',
      render: (d) => (d?.cateName ? d?.cateName : null),
      width: 80,
      treeColumnsName: checked && 'childList',
      fixed: 'left',
    },
]

...

return (
  <Switch
      content={['分类', '部门']}
      size={16}
      value={checked}
      onChange={() => setChecked(!checked)}
    />
    
    <Table
      changedByExpand
      keygen='cateId'
      columns={columns}
      data={list}
      treeExpandKeys={treeExpandKeys}
      onTreeExpand={(keys) => setTreeExpandKeys(keys)}
    />
)

谢谢！
​

[leehaoChen]

您好, treeColumnsName 支持多个的场景场景确实比较特逻，考虑到使用场景较小且逻辑较复杂我们暂时没有计划支持这个功能， 如果你想要不显示 + - 可以直接通过css 来处理。