一. 场景

UI框架：“ant-design-vue”: “^2.1.3”

如下图，点击红色框中的图标时，所有的数据根据当前点击的内容进行升降排序。

二. 实现

2.1 如果是前端实现排序

// 表格列的配置描述
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' });
		},
	}
	...
]

因为是对所有的数据进行排序，如果数据过多建议后端进行排序，前端会有分页，且不会一次拿完所有数据。

2.1 如果是后端实现排序，前端再调接口拿

将需要排序的列设置属性 sorter: true

// 表格列的配置描述
const columns = [
	...
	{
		title: '实验名称',
		key: 'abName',
		slots: { customRender: 'abName' },
		width: '16%',
		sorter: true
	}
	...
]

这样在点击表头文字右边的上下箭头时会触发table的change事件。

在a-table中绑定change事件：

<a-table
	v-show="abProductManagerListQueryCode"
	bordered
	v-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.每次点击时都能拿到当前的点击对象（比如列子中abName），可以通过sorter参数里面的columnKey拿到。

2.每次点击时可以区分是升序、降序、还是既不升序也不降序，
sorter参数中order值为"ascend"时为升序；
sorter参数中order值为"descend"时为降序；
sorter参数中没有order键时为既不升序也不降序。

所以我们就可以在change绑定的事件中，根据排序的类型（点击的哪一列）、升序还是降序来向服务器发送请求拿到数据。

不过需要注意一点：columns配置时

如果当前列设置了slots属性（比如上面的实验名称），则在第三种打印情况中，sorter参数打印的field为undefined；
如果没有设置slots属性，sorter参数打印的field为abName，和columnKey的值一样。

所以在确认当前点击的是哪一列时应该取sorter参数中的columnKey字段。

（完）