antd 表格sorter进行服务器排序

先直接上代码

<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版本也是适用，其实方法都一样，就是写法不一样而已