Antd表排序忽略子级

如何解决Antd表排序忽略子级

我正在尝试对具有子项的表进行排序，但是它忽略了子项的值“ Age”。 包括儿童在内的所有项目应按升序或降序排序。不知道这是一个错误还是我的实现不正确。

Codesanbox：https://codesandbox.io/s/hardcore-paper-nvodp

当前结果，子级被忽略。这个想法也是对树中的每一项进行排序。

js：

const columns = [
  {
    title: "Name",dataIndex: "name",key: "name"
  },{
    title: "Age",dataIndex: "age",key: "age",width: "12%",sorter: {
      compare: (a,b) => a.age - b.age,multiple: 3
    }
  },{
    title: "Address",dataIndex: "address",width: "30%",key: "address"
  }
];

const data = [
  {
    key: 1,name: "John Brown sr.",age: 60,address: "New York No. 1 Lake Park",children: [
      {
        key: 11,name: "John Brown",age: 42,address: "New York No. 2 Lake Park"
      }
    ]
  },{
    key: 2,name: "Joe Black",age: 22,address: "Sidney No. 1 Lake Park",children: [
      {
        key: 10,age: 12,address: "New York No. 2 Lake Park"
      }
    ]
  }
];

function onChange(pagination,filters,sorter,extra) {
  console.log("params",extra);
}

function TreeData() {
  return (
    <>
      <Table
        columns={columns}
        dataSource={data}
        onChange={onChange}
        indentSize={0}
      />
    </>
  );
}

解决方法

您不能在同一棵树中使用父级和子级，以便所有元素都按年龄排序。

这不再是一棵树，根本没有意义。您会失去父母与子女的关系。

如果要按年龄对所有元素进行排序，则必须将项目移动到列表中并在那里进行排序。

您只能对相同级别的项目进行排序，这就是@ edo9k的implementation正确执行的操作！

在每个树级别，按年龄分类的树排序工作均如此：

• 父母[22，61，62]
• children1 [12]
• children2 [10，30，40]
• children3 [41，42]

,

通过AntD实现此目的的最佳方法是使用嵌套表组件。您可以将主表中每一行的可扩展/子级数据显示到此嵌套表中，然后通过将可排序函数合并到嵌套表中来对该数据进行排序。