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 つだけの場合は、3 つの仮パラメータを定義する必要はなく、tableOnChangeにロジックを記述してインターフェイスを呼び出すだけです。

2 つ以上ある場合は、一意の識別子を決定する必要があります。そうしないと、どれをクリックしたかわかりませんよね? メソッド内に 3 つの仮パラメータを定義し、3 番目のパラメータ s に一意の識別子 s.field が存在します。

このs.field は 、列で定義した名前です。if を使用して、どのテーブル ヘッダーをクリックしたかを判断し、インターフェイスのパラメーターを渡してインターフェイスを呼び出すことができます。

 上記のreact版も同様で、実はやり方は同じですが、書き方が異なります。