Question

我在React类型脚本中使用了 ant design sort table code ，它不能正常工作，任何人都知道如何正确完成操作

我的代码在这里

     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} />

Working sample antd table with typescript here...

Answer 2

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

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

蚂蚁设计排序表代码不适用于反应打字稿

2 个答案: