Ant 设计表行顺序与 API 数据顺序不同

问题描述

我有一个 API 来获取按参数排序的分页数据。 API 结果已排序，但是当我将该数据作为 dataSource 添加到我的表中时，该顺序不会得到维护。排序适用于 Name 列，API 提供排序数据，但在表中不维护记录的顺序。在 ascend 和 descend 的情况下会发生这种情况。

<Table
    className="assetlibrary-table-wrapper__table"
    columns={columns}
    dataSource={tableData}
    onChange={onChange}
    pagination={pagination}
    loading={loading}
    onRow={(record,rowIndex) => {
      return {
        onClick: event => {
          movetoData(record);
        }
      };
    }}
/>

以下是列

const columns = [
    {
      className: 'image-td',title: '3D',dataIndex: 'threeD',render: (text,record) => (
        <div className="image-parent">
          <div className="image-left"></div>
          <div style={{ width: '70px',height: '70px' }}>
            {getimageOrEmpty(record)}
          </div>
        </div>
      )
    },{
      title: 'Name',dataIndex: 'seName',record) => (
        <div style={{ color: '#828CFD',cursor: 'pointer' }} onClick={() => movetoData(record)}>
          {record.seName}
        </div>
      ),sorter: (a,b) => a.seName.length - b.seName.length,sortDirections: ["ascend","descend","ascend"],defaultSortOrder: 'ascend'
    },{
      title: 'ID',dataIndex: 'seId',record) => (
        <Dropdown trigger={['hover']} overlay={menuSEID(record)} placement="bottomright">
          <Button
            size="large"
            style={{
              color: '#828CFD',fontSize: '20px',height: 'min-content',lineHeight: '0'
            }}
            icon="info-circle"
            type="link"
          ></Button>
        </Dropdown>
      )
    },{
      title: 'Digital Twin',dataIndex: 'digitalTwin'
    },{
      title: 'Parent',dataIndex: 'category'
    },{
      title: 'Type',dataIndex: 'type',record) => (
        <span>{record.type == 'Part Group' ? 'Assembly' : record.type}</span>
      )
    },{
      title: 'Action',dataIndex: 'action',record) => (
        <Dropdown trigger={['hover']} overlay={menu} placement="bottomright">
          <Button
            size="large"
            style={{
              color: '#999999',fontSize: '18px',lineHeight: '0'
            }}
            icon="more"
            type="link"
          ></Button>
        </Dropdown>
      )
    }
  ];

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

antd reactjs reactjs