antd table 排序

1,效果图如下 

 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);
发布了50 篇原创文章 · 获赞 7 · 访问量 3万+

猜你喜欢

转载自blog.csdn.net/xh_960125/article/details/90297738