官方示例-API链接
数据根据当前点击的内容进行升降排序
使用步骤
数据量过少，可以使用前端排序方式
//官方案例<template><a-table :columns="columns" :data-source="data" @change="onChange" /></template><script>const columns = [{title: 'Name',dataIndex: 'name',filters: [{text: 'Joe',value: 'Joe',},{text: 'Jim',value: 'Jim',},{text: 'Submenu',value: 'Submenu',children: [{text: 'Green',value: 'Green',},{text: 'Black',value: 'Black',},],},],// specify the condition of filtering result// here is that finding the name started with `value`onFilter: (value, record) => record.name.indexOf(value) === 0,sorter: (a, b) => a.name.length - b.name.length,sortDirections: ['descend'],},{title: 'Age',dataIndex: 'age',defaultSortOrder: 'descend',sorter: (a, b) => a.age - b.age,},{title: 'Address',dataIndex: 'address',filters: [{text: 'London',value: 'London',},{text: 'New York',value: 'New York',},],filterMultiple: false,onFilter: (value, record) => record.address.indexOf(value) === 0,sorter: (a, b) => a.address.length - b.address.length,sortDirections: ['descend', 'ascend'],},];const data = [{key: '1',name: 'John Brown',age: 32,address: 'New York No. 1 Lake Park',},{key: '2',name: 'Jim Green',age: 42,address: 'London No. 1 Lake Park',},{key: '3',name: 'Joe Black',age: 32,address: 'Sidney No. 1 Lake Park',},{key: '4',name: 'Jim Red',age: 32,address: 'London No. 2 Lake Park',},];function onChange(pagination, filters, sorter) {console.log('params', pagination, filters, sorter);}export default {data() {return {data,columns,};},methods: {onChange,},};</script>--------------------------------------------------------------------------------// 表格列的配置描述 - 简版const columns = [...{title: '实验名称',key: 'abName',slots: { customRender: 'abName' },width: '16%',sorter: (a, b) => {let prev = a.abName ? a.abName : '';let next = b.abName ? b.abName : '';return prev.localeCompare(next, 'zh-Hans-CN', { sensitivity: 'accent' });},}...]
如果数据过多建议后端进行排序，前端会有分页，且不会一次拿完所有数据，可以使用后端排序
将需要排序的列设置属性 sorter: true
// 表格列的配置描述const columns = [...{title: '实验名称',key: 'abName',slots: { customRender: 'abName' },width: '16%',sorter: true}...]
点击表头文字右边的上下箭头时会触发table的change事件
<a-tablev-show="abProductManagerListQueryCode"borderedv-bind="tableProps":columns="columns":row-key="(record) => record.abNameId"@change="pageChange":pagination="{defaultPageSize: 10,showSizeChanger: true,showQuickJumper: true,total: tableProps.totalData,showTotal: (total, range) => `共 ${total} 条`,pageSizeOptions: ['10', '20', '30', '40', '50'],}">...</a-table>// change事件绑定的函数function pageChange(page, filters, sorter) {console.log(page);console.log(filters);console.log(sorter);}
第一次点击名称右边箭头时触发事件，朝上箭头高亮，为升序
第二次点击名称右边箭头时触发事件，朝下箭头高亮，为降序
第三次点击名称右边箭头时触发事件，朝上朝下箭头都不高亮，为既不升序，也不降序
参数说明
1.每次点击时都能拿到当前的点击对象（比如列子中Age），可以通过sorter参数里面的columnKey拿到。
2.每次点击时可以区分是升序、降序、还是既不升序也不降序，
sorter参数中order值为"ascend"时为升序；
sorter参数中order值为"descend"时为降序；
sorter参数中没有order键时为既不升序也不降序。
所以我们就可以在change绑定的事件中，根据排序的类型（点击的哪一列）、升序还是降序来向服务器发送请求拿到数据。
所以在确认当前点击的是哪一列时应该取sorter参数中的columnKey字段。
