使用antd的table组件实现一个交叉表（动态合并单元格）

Posted 2023-05-10

参考技术A 最终效果如下图

主要难点在于左侧模拟的表头，需要自己合并，用到的是rowSpan属性。

数据：

组件：

自定义过滤antd表dataSource的子项

我正在使用antd的table组件。我希望能够将节点过滤到任何后代。

我跟随antd的custom filter的例子。这个例子不是树形结构，所以这里有一个正确设置的codesandbox。

onFilter似乎只遍历根节点。我不知道如何显示特斯拉>模型3我在搜索输入中键入'3'。我知道我必须为特斯拉返回true，但我仍然不明白如何为true返回Model 3

数据

const data = [
      {
        key: "13",
        name: "Tesla",
        data: {
          description: "Car manufacturer",
          type: "Organization"
        },
        children: [
          {
            key: "4444",
            name: "Model S",
            data: {
              description: "The fastest",
              type: "Project"
            }
          },
          {
            key: "1444323",
            name: "Model 3",
            data: {
              description: "The cheapest",
              type: "Project"
            }
          }
        ]
      },
      {
        key: "1",
        name: "Microsoft",
        data: {
          description: "#1 software company",
          type: "Organization"
        }
      }
    ];

应用

class App extends React.Component {
  state = {
    searchText: '',
  };

  getColumnSearchProps = (dataIndex) => ({
    filterDropdown: ({
      setSelectedKeys, selectedKeys, confirm, clearFilters,
    }) => (
      <div style={{ padding: 8 }}>
        <Input          
          placeholder={`Search ${dataIndex}`}
          value={selectedKeys[0]}
          onChange={e => setSelectedKeys(e.target.value ? [e.target.value] : [])}
          onPressEnter={() => this.handleSearch(selectedKeys, confirm)}              
        />
        <Button
          type="primary"
          onClick={() => this.handleSearch(selectedKeys, confirm)}
          icon="search"
        >
          Search
        </Button>            
      </div>
    ),

    // onFilter seems to only loop over root nodes
    onFilter: (value, record) => record[dataIndex].toString().toLowerCase().includes(value.toLowerCase()),    
    render: (text) => (
      <Highlighter
        ...
      />
    ),
  })     

  render() {
    const columns = [{
      title: 'Name',
      dataIndex: 'name',
      key: 'name',
      ...this.getColumnSearchProps('name'),
    }];
    return <Table columns={columns} dataSource={data} />;
  }
}

答案

您可以编写一个函数来获取节点的后代值（基于dataIndex）并过滤任何具有搜索文本的函数。

这将在返回值之前进入getColumnSearchProps：

const getDescendantValues = (record) => {
        const values = [];
        (function recurse(record) {
            values.push(record[dataIndex].toString().toLowerCase());
            record.children.forEach(recurse);
        })(record);
        return values;
    } 

...这将是更新的onFilter：

onFilter: (value, record) => {
  const recordName = record[dataIndex] || record.data[dataIndex];
  const searchLower = value.toLowerCase();
  return recordName
      .toString()
      .toLowerCase()
      .includes(searchLower)
      ||
      getDescendantValues(record).some(descValue => descValue.includes(searchLower));
  }

我在这里分叉你的沙盒：https://codesandbox.io/s/10jp9wql1j

...它包含所有根节点以及满足搜索条件的任何后代。但是，它不会过滤掉不满足您的搜索条件的其他后代节点。