react.js - ant-design中Table组件在进行列排序图表展示错误问题?

Question

ant-design中的Table组件，设置某列可进行排序操作。第一次点击降序的箭头，发现高亮的却是升序的箭头。这要怎么去进行修改。官网里面的Demo也是有这样的情况。

ant-design中的Table组件，设置某列可进行排序操作。希望第一次点击降序箭头的时候，高亮的是降序箭头，而不是升序箭头。

Answer 1

import React, { useState } from 'react';
import { Table } from 'antd';

const App = () => {
  const [sortedInfo, setSortedInfo] = useState({
    order: 'descend',
    columnKey: 'age'
  });

  const data = [
    {
      key: '1',
      name: 'John',
      age: 32,
    },
    {
      key: '2',
      name: 'Jim',
      age: 42,
    }
  ];

  const columns = [
    {
      title: 'Name',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: 'Age',
      dataIndex: 'age',
      key: 'age',
      sorter: (a, b) => a.age - b.age,
      sortOrder: sortedInfo.columnKey === 'age' ? sortedInfo.order : null,
    }
  ];

  const handleChange = (pagination, filters, sorter) => {
    setSortedInfo(sorter);
  };

  return (
    <Table 
      columns={columns} 
      dataSource={data} 
      onChange={handleChange}
    />
  );
};

export default App;

Answer 2

可以通过设置sortDirections属性来控制排序方向的顺序。以下是一个示例代码

import React from 'react';
import { Table } from 'antd';

const data = [
  { key: '1', name: 'John Brown', age: 32 },
  { key: '2', name: 'Jim Green', age: 42 },
  // 更多数据
];

const columns = [
  {
    title: 'Name',
    dataIndex: 'name',
    sorter: (a, b) => a.name.localeCompare(b.name),
    sortDirections: ['descend', 'ascend'], // 设置排序方向顺序
  },
  {
    title: 'Age',
    dataIndex: 'age',
    sorter: (a, b) => a.age - b.age,
    sortDirections: ['descend', 'ascend'], // 设置排序方向顺序
  },
];

const App = () => (
  <Table columns={columns} dataSource={data} />
);

export default App;

在这个示例中，通过将sortDirections属性设置为['descend', 'ascend']，可以确保第一次点击时高亮降序箭头。如果你有更多的列需要排序，可以在每一列的配置中添加相同的sortDirections设置。

补充

1.状态管理： 使用一个状态变量来跟踪当前的排序状态（升序或降序）。
2.条件渲染： 根据状态变量来渲染对应的箭头高亮。
示例

<template>
  <div>
    <button @click="sort('asc')">
      升序
      <span v-if="sortOrder === 'asc'">⬆️</span>
    </button>
    <button @click="sort('desc')">
      降序
      <span v-if="sortOrder === 'desc'">⬇️</span>
    </button>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const sortOrder = ref(null);

function sort(order) {
  sortOrder.value = order;
  // 在这里添加你的排序逻辑
}
</script>

Answer 3

在 Ant Design 的 `Table` 组件中，如果遇到排序箭头高亮显示不正确的问题，这通常是由于组件内部状态管理或排序逻辑处理不当导致的。要解决这个问题，可以尝试以下几种方法：

1. **确保 `sorter` 属性正确设置**：
   确保在 `columns` 定义中，对应列的 `sorter` 属性被正确设置。如果使用的是函数式排序，确保排序逻辑没有问题。

2. **检查 `onChange` 回调**：
   如果你在 `Table` 组件上使用了 `onChange` 回调来处理排序，确保回调中正确处理了排序方向和当前排序的列。

3. **重置组件状态**：
   如果问题依然存在，尝试在排序操作后重置组件的某些状态，或者重新渲染组件，以确保组件内部状态与排序状态一致。

4. **使用 `defaultSortOrder`**：
   你可以为列设置 `defaultSortOrder` 属性，指定默认的排序顺序（`'ascend'` 或 `'descend'`）。这可以帮助在组件初始化时设置正确的排序状态。

const columns = [

 {
   title: 'Name',
   dataIndex: 'name',
   sorter: (a, b) => a.name.localeCompare(b.name),
   defaultSortOrder: 'descend',  // 设置默认排序顺序为降序
 },
 // 其他列定义...

];

5. **检查 Ant Design 版本**：
确保你使用的 Ant Design 版本没有已知的排序相关 bug。如果可能，尝试升级到最新版本。

6. **查看官方示例和社区反馈**：
虽然你提到官方 Demo 也有类似问题，但检查最新的官方文档和社区反馈仍然是一个好习惯，因为这些问题可能已经在新版本中得到了修复。

通过上述步骤，你应该能够定位并解决 `Table` 组件中排序箭头高亮显示不正确的问题。如果问题依然存在，建议查阅更多 Ant Design 的文档或在相关社区（如 GitHub Issues、Stack Overflow）中寻求帮助。