react+antd+antdpro+dva---table升降序及筛选的使⽤（排序+筛选）这次的需求是列表页可以按照时间进⾏升降序的排列（直接请求后端）及列筛选，如图：
在打开页⾯时，我们要⾸先请求接⼝，获取缺卡类型的筛选数据，然后把数据拼成正确的格式赋给table的column：
// 获取缺卡类型和缺卡状态的筛选菜单数据
getTypeListAll = () => {
const { dispatch } = this.props;
const param = {
dictCode: 'lackStatus'
};
const param2 = {
dictCode: 'lackType'
};
dispatch({
type: 'abnormalRank/fetchTypeList',
payload: param,
callback: () => {
dispatch({
type: 'abnormalRank/fetchLackTypeList',
payload: param2,
callback: () => {
this.setfilters();
}
});
}
});
};
// 类型/状态-加⼊表格的筛选，并将最新的column存⼊state
setfilters = () => {
const {
abnormalRank: { typeList, lackTypeList }
} = this.props;
const column = [
{
title: '⼯号',
dataIndex: 'userNo',
key: 'userNo'
},
{
title: '姓名',
dataIndex: 'userName',
key: 'userName'
},
{
title: '部门',
dataIndex: 'departName',
key: 'departName'
},
{
title: '缺卡类型',
dataIndex: 'typeNick',
key: 'typeNick',
filters: []
},
{
title: '缺卡时间',
dataIndex: 'lackTime',
key: 'lackTime',
render: (text, record) => {
return <span>{record.lackTime}</span>;
},
sorter: () => {}
},
{
title: '状态',
dataIndex: 'status',
key: 'status',
filters: []
},
{
title: '补卡时间',
dataIndex: 'reissueTime',
key: 'reissueTime',
render: (text, record) => {
return <span>{issueTime}</span>;
},
sorter: () => {}
},
{
title: '相关流程',
dataIndex: 'applicationNo',
key: 'applicationNo',
render: (text, record) => {
return (
<a
onClick={() =>
router.push(
`/xxx?abnormalId=${record.userNo}`
)
}
>
{record.applicationNo}
</a>
);
}
},
{
title: '操作',
dataIndex: 'action',
key: 'action',
render: (text, record) => {
return (
<div>
<span>
<Link
to={{
pathname:
'/xxxx',
query: {
id: ployeeId,
name: ployeeName,
signDate: record.signDate
}
}}
>
打卡记录
</Link>
</span>
<a onClick={() => this.seeDetail(record)}>补卡</a>
</div>
);
}
}
];
const lackStatus = [];
const lackType = [];
for (let index = 0; index < typeList.length; index += 1) {
const list = {
text: typeList[index].dictName,
value: typeList[index].dictKey
};
lackStatus.push(list);
}
for (let index = 0; index < lackTypeList.length; index += 1) {
const list = {
text: lackTypeList[index].dictName,
value: lackTypeList[index].dictKey
react router的state和search};
lackType.push(list);
}
column[3].filters = lackType;
column[5].filters = lackStatus;
this.setState({
columns: column
});
};
可以注意到代码中的两个时间的列加了⼀个空的sorter：
⽽table的onChange事件⾥有sorter和filters两个参数【可以参考⽂档】，jsx代码：render() {
const { loading, dispatch, abnormalRank, form } = this.props;
const { missData, pagination } = abnormalRank;
const { columns } = this.state;
const { locale } = new Locale('stat.overtime');
return (
<Fragment>
<Form layout="inline" onSubmit={this.handleSubmit}>
<Card
bordered={false}
title="缺卡记录"
extra={
<Fragment>
<Button type="primary" htmlType="submit">
{locale('form.search', false)}
</Button>
</Fragment>
}
>
<Row type="flex" className="searchTitle">
<Col>
<QuickForm
form={form}
config={getPath(this.props, 'config')}
/>
</Col>
</Row>
</Form>
<Card bordered={false} style={{ marginTop: '24px' }}>
<Table
dataSource={missData}
columns={columns}
loading={loading}
rowKey="id"
onChange={this.changeTable}
pagination={{
...pagination,
showTotal: total => (
<TablePagination
itemsName={Locale.set('items')}
total={total}
pageSize={pagination.pageSize}
onChange={async pageSize => {
await dispatch({
type: 'abnormalRank/setPagination',
pagination: {
...pagination,
pageSize,
current: 1
}
});
this.fetchList();
}}
/>
)
}}
/>
</Card>
</Fragment>
);
}
  在事件中可以进⾏类型、状态、以及排序的参数的存储，再通过调⽤接⼝请求数据：changeTable = async (pagination, filters, sorter) => {
    　// orderBy⽤来拼接 ‘排序根据词+空格+升序/降序’ 的字符串，⽤来传给后端，由后端进⾏数据的整理        let orderBy;
let sorterField;
if (sorter && sorter.field) {
if (sorter.field === 'lackTime') {
sorterField = 'lack_time';
}
if (sorter.field === 'reissueTime') {
sorterField = 'reissue_time';
}
const order = im().split('end')[0];
orderBy = `${sorterField} ${order}`;
this.setState({
orderByField: orderBy
});
} else {
this.setState({
orderByField: ''
});
}
const {
dispatch,
abnormalRank: { pagination: curPagination }
} = this.props;
await dispatch({
type: 'abnormalRank/setPagination',
pagination: {
...curPagination,
current: pagination.current
}
});
this.setState(
{
lackStatus: filters.status,
lackType: peNick
},
() => {
this.fetchList();
}
);
};
请求其他部分代码：
constructor(props) {
super(props);
this.state = {
lackStatus: [],
lackType: [],
columns: [],
orderByField: ''
};
}
componentDidMount() {
this.fetchList();
}
// 获取列表
fetchList = () => {
const {
dispatch,
abnormalRank: { pagination },
form
} = this.props;
const { getFieldsValue } = form;
const { companyDepart, date, userName } = getFieldsValue();
const parame = {
companyId: companyDepartpanyId,
startTime: date.range[0].format('YYYY-MM-DD'),
endTime: date.range[1].format('YYYY-MM-DD'),
employeeName: userName || '',
pageNo: pagination.current,
pageSize: pagination.pageSize,
orderByField: getPath(this.state, 'orderByField', ''),
lackStatus: getPath(this.state, 'lackStatus', []),
lackType: getPath(this.state, 'lackType', [])
};
type: 'abnormalRank/fetchMylack',
payload: parame
});
};
补充：有⼀个列表页需要从其他页⾯跳转，需要携带查询参数，包括了类型，因此做⼀些补充：
setfilters这个⽅法⾥添加类型的初始化：这⾥⽤到了antd表格筛选的⼀个属性：filteredValue
因为加⼊初始化设置后，在刷新页⾯时，column的渲染依旧会⾛这个初始化设置，会导致页⾯选中筛选项进⾏查询后，渲染出来的表头没有加⼊筛选的选中状态与选中项，所以我们在table的changeTable事件⾥需要补充：
重新处理column的filteredValue属性即可。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。