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);