zl-table

Table组件 代码示例

class Test extends React.Component {

    handleClickSort = (key:string, type:string)=> {
        console.log(key, type);
    };

    render() {
        let columns = [
            {
                "key": '20',
                "title": "编号",
                "name": "number",
                "showSort": true
            },
            {
                "key": '21',
                "title": "司机端/门店端",
                "name": "duan",
            },
            {
                "key": '22',
                "title": "商品审核状态",
                "name": "status"
            },
            {
                "key": '23',
                "title": "是否有效",
                "name": "work"
            },
        ];
        let dataSource = [
            {
                "key": "123",
                "number": 201909231021212,
                "duan": "知轮定制润滑膏一罐装（新用户专享）",
                "status": "已通过",
                "work": "x"
            },
            {
                "key": "124",
                "number": 201909231021212,
                "duan": "知轮定制润滑膏一罐装（新用户专享）",
                "status": "已通过",
                "work": "x"
            },
            {
                "key": "125",
                "number": 201909231021212,
                "duan": "知轮定制润滑膏一罐装（新用户专享）",
                "status": "已通过",
                "work": "x"
            },
            {
                "key": "129",
                "number": 201909231021212,
                "duan": "知轮定制润滑膏一罐装（新用户专享）",
                "status": "已通过",
                "work": "x"
            },
            {
                "key": "126",
                "number": 201909231021212,
                "duan": "知轮定制润滑膏一罐装（新用户专享）",
                "status": "已通过",
                "work": "x"
            },
            {
                "key": "127",
                "number": 201909231021212,
                "duan": "知轮定制润滑膏一罐装（新用户专享）",
                "status": "已通过",
                "work": "x"
            }
        ];
        const rowSelection = {
            onChange: function (keys:string[]) {
                console.log(keys);
            }
        };
        return (
            <Table columns={columns} dataSource={dataSource} rowSelection={rowSelection} handleSort={this.handleClickSort}/>
        );
    }
}

效果