先直接上代码
<template>
<Table
:columns="columns"
size="small"
:data-source="tableDate.list"
:on-change="tableOnChange"
/>
</template>
<script setup lang="ts">
//接口引入
import { getList } from '@/api/index';
import { ref } from 'vue';
const tableDate= ref({});
//接口需要的参数,我这边的
const params = {
page: 1,
pageSize: 6,
//排序
totalSort: 1,
//排序
freeSort: 0,
};
//调用接口
const getListFun = async () => {
const data = await getList(params);
data.list.forEach((item, index) => {
item.index = index + 1;
});
tableDate.value = data;
};
getListFun()
//定义表头,然后需要排序的在对象里面设置sorter: true,
const columns = [
{
title: '排名',
dataIndex: 'index',
},
{
title: '停车场名称',
dataIndex: 'address',
},
{
title: '总车位',
dataIndex: 'total',
sorter: true,
},
{
title: '剩余车位',
dataIndex: 'free',
sorter: true,
},
];
//主要这一步,这个可以接收3个参,
//第三个参数 s 里面有一个fieId,这个field 就是你刚刚在columns 里面填写的那个dataIndex的值,
//点击不同的表头排序就会给field 赋值不一样dataIndex,如果存在多个排序的话,
//通过field 的值进行一个判断,然后在进行排序
const tableOnChange = (p, f, s) => {
//第一个排序
if (s.field == 'total') {
if (params.totalSort == 1) {
params.totalSort = 2;
} else {
params.totalSort = 1;
}
//把前一个排序的参数清空掉
params.freeSort = 0;
//调用接口方法
getListFun();
}
//第二个排序
if (s.field == 'free') {
if (params.freeSort == 1) {
params.freeSort = 2;
} else {
params.freeSort = 1;
}
//把前一个排序的参数清空掉
params.totalSort = 0;
//调用接口方法
getListFun();
}
};
</script>
分析
把需要服务器排序的把sorter设置为true
然后给标签绑定一个onChange
然后onChange 绑定一个方法,我这边的方法名字叫tableOnChange
如果只有一行需要服务器排序的话,就不需要定义三个形参,直接tableOnChange里面写逻辑就调用接口就好
如果存在2个以上的就需要判断唯一标识符了,不然你也不知道你点了那个是吧,在方法里面定义三个形参,第三个参 s 里面存在唯一标识符s.field 。
这个s.field 是你在columns里面给他定义的名字,你可以通过if判断他点击了那个表头然后进行一个接口的参数传递,和接口调用就可以了。
以上react版本也是适用,其实方法都一样,就是写法不一样而已