Antd表排序忽略子级

Question

我正在尝试对具有子项的表进行排序，但是它忽略了子项的值“ 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,
        name: "John Brown",
        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}
      />
    </>
  );
}

Answer 1

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

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

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

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

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

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

Answer 2

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