antd table 排序

淩亂°似流年 2022-01-30 02:29 590阅读 0赞

1，效果图如下

![2019051717441622.png][] 2，代码如下

@Form.create()
    class StudentsList extends PureComponent {
     state = {
        eAdd:"",
        eEdit:"",
        eDestroy:"",
        filteredInfo: null,
        sortedInfo: null,
        pageQuery:'',
      };
    
      // 排序开始
      handleChange = (pagination, filters, sorter,) => {
        console.log('Various parameters',  sorter);
        const { dispatch, form } = this.props;
        const query = this.props.query;
        const pageQuery=this.state.pageQuery;
        const sortVlaue=sorter.field;
        form.validateFields((err) => {
          if (!err) {
            if(sorter.order=="ascend"){
              dispatch({ type: 'students/fetch', payload: { sort: sortVlaue , order: "ASC" ,query,name:pageQuery} });
              this.setState({
                filteredInfo: filters,
                sortedInfo: sorter,
              });
            } else if (sorter.order=="descend"){
              dispatch({ type: 'students/fetch', payload: { sort: sortVlaue , order: "DESC" ,query,name:pageQuery} });
              this.setState({
                filteredInfo: filters,
                sortedInfo: sorter,
              });
            }else {
              dispatch({ type: 'students/fetch', payload: { sort: sortVlaue , order: "ASC" ,query,name:pageQuery} });
              this.setState({
                filteredInfo: filters,
                sortedInfo: sorter,
              });
            }
          }
        })
      };
    
      clearFilters = () => {
        this.setState({ filteredInfo: null });
      };
    
      clearAll = () => {
        this.setState({
          filteredInfo: null,
          sortedInfo: null,
        });
      };
      // 排序结束
    
    }
    
    render() {
       let { sortedInfo, filteredInfo } = this.state;
        sortedInfo = sortedInfo || {};
        filteredInfo = filteredInfo || {};
        const columns = [
          {
            title: '学员编号',
            dataIndex: 'code',
            key: 'code',
            onFilter: (value, record) => record.code.includes(value),
            sorter: (a, b) => a.code.length - b.code.length,
            sortOrder: sortedInfo.columnKey === 'code' && sortedInfo.order,
            align: 'center',
          },
          
        ];
      return (
         <Table
                columns={columns}
                dataSource={studentsList}
                rowKey={record => record.id}
                pagination={false}
                rowSelection={rowSelection}
                onChange={this.handleChange}
              />
    )
    }
    }
    function mapStateToProps(state) {
      return { ...state.students };
    }
    export default connect(mapStateToProps)(StudentsList);

[2019051717441622.png]: /images/20220130/c95a46e3901841c19990dbd9d777d1c2.png