Ant 设计排序表代码不适用于反应 typescript

Question

我在反应类型脚本中使用了以下ant 设计排序表代码，它无法正常工作任何人都知道如何正确地做到这一点

我的代码在这里

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

import { Table } from 'antd';
const columns = [
    {
        title: 'Name',
        dataIndex: 'name',
        filters: [
            {
                text: 'Joe',
                value: 'Joe',
            },
            {
                text: 'Jim',
                value: 'Jim',
            },
            {
                text: 'Submenu',
                value: 'Submenu',
                children: [
                    {
                        text: 'Green',
                        value: 'Green',
                    },
                    {
                        text: 'Black',
                        value: 'Black',
                    },
                ],
            },
        ],
        // specify the condition of filtering result
        // here is that finding the name started with `value`
        onFilter: (value:any, record:any) => record.name.indexOf(value) === 0,
        sorter: (a:any, b:any) => a.name.length - b.name.length,
        sortDirections: ['descend'],
    },
    {
        title: 'Age',
        dataIndex: 'age',
        defaultSortOrder: 'descend',
        sorter: (a:any, b:any) => a.age - b.age,
    },
    {
        title: 'Address',
        dataIndex: 'address',
        filters: [
            {
                text: 'London',
                value: 'London',
            },
            {
                text: 'New York',
                value: 'New York',
            },
        ],
        filterMultiple: false,
        onFilter: (value:any, record:any) => record.address.indexOf(value) === 0,
        sorter: (a:any, b:any) => a.address.length - b.address.length,
        sortDirections: ['descend', 'ascend'],
    },
];

const data = [
    {
        key: '1',
        name: 'John Brown',
        age: 32,
        address: 'New York No. 1 Lake Park',
    },
    {
        key: '2',
        name: 'Jim Green',
        age: 42,
        address: 'London No. 1 Lake Park',
    },
    {
        key: '3',
        name: 'Joe Black',
        age: 32,
        address: 'Sidney No. 1 Lake Park',
    },
    {
        key: '4',
        name: 'Jim Red',
        age: 32,
        address: 'London No. 2 Lake Park',
    },
];
function onChange(pagination:any, filters:any, sorter:any, extra:any) {
    console.log('params', pagination, filters, sorter, extra);
}
//Table sample data
export class Customertable extends React.Component {


    render() {
        return (

            /* Start Search button*/
            <div className="customertable-section">
                <div>
                    <Table columns={columns} dataSource={data} onChange={onChange} />

                </div>


            </div>
            /* End of  Search button*/
        );
    }
}

Answer 1

在打字稿中声明变量时，您需要像columns: any = []和data: any = [] ..

在制作table ，你应该给道具，比如，

<Table columns={this.columns} dataSource={this.data} />

此处使用打字稿工作示例 antd 表...

Answer 2

为了添加 Maniraj 的评论，文档提供了一个关于 Typescript 特定用法的部分： https ://ant.design/components/table/#Using-in-TypeScript

通过从'antd/es/table'导入ColumnsType可以设置columns的类型

Answer 3

这里的解决方案可能会帮助某人。 您应该使用默认的 ant 类型为表配置编写类型，然后在比较 func 时，您的项目是 DefaultRecordType，func 返回数字。

 const TABLE_COLUMNS: ColumnsType<DefaultRecordType> = [ { title: 'ISO #', dataIndex: 'iso', key: 'iso', sorter: (a: DefaultRecordType, b: DefaultRecordType): number => a.iso.localeCompare(b.iso), },]

Answer 4

您可以通过将旧代码替换为新代码来简单地对ant 设计表的列进行排序：

旧代码：

sorter: (a:any, b:any) => a.name.length - b.name.length,

新代码：

sorter: (a:any, b:any) => a.name.localeCompare(b.name),