antd 테이블 분류기는 서버 정렬을 수행합니다.

먼저 코드로 바로 이동하세요.

<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입니다.

 서버에서 정렬해야 하는 행이 1개뿐인 경우에는 세 가지 형식적인 매개변수를 정의할 필요 없이 tableOnChange 에 로직을 작성 하고 인터페이스를 호출하기만 하면 됩니다.

2개 이상 있으면 고유 식별자를 결정해야 하고, 그렇지 않으면 어떤 것을 클릭했는지 알 수 없겠죠? 메서드에 형식 매개변수 3개를 정의하고, 세 번째 매개변수 s에 고유 식별자 s.field가 존재합니다 .

이 s.field는  열에 정의한 이름입니다. if를 사용하여 그가 클릭한 테이블 헤더를 확인한 다음 매개변수를 인터페이스로 전송하고 인터페이스를 호출할 수 있습니다.

 위의 React 버전도 적용 가능하며, 실제로 방법은 동일하지만 작성 방법이 다릅니다.