解决ant design vue的table组件分页查询中排序只进行本页排序的问题？

Question

<template>
  <a-modal width="80%" height="80%" :visible="visibleFlag" @cancel="onClose" :maskClosable="false" :destroyOnClose="true">
    <div class="title">
      <text style="margin-right: 30px">病人ID：{{ form.patientId }}</text>
      <text>姓名：{{ form.name }}</text>
    </div>
    <div style="display: flex">
      <div>
        <a-table
          class="ant-table-striped"
          size="small"
          :dataSource="tableData"
          :columns="columns"
          bordered
          :pagination="false"
          :customRow="rowClick"
          :rowClassName="setRowClassName"
          :scroll="{ y: 480 }"
          @change="handleChange"
        >
        </a-table>
        <div class="smart-query-table-page">
            <a-pagination
              showSizeChanger
              showQuickJumper
              show-less-items
              :pageSizeOptions="queryForm.pageSizeOptions"
              :defaultPageSize="queryForm.pageSize"
              v-model:current="queryForm.pageNum"
              v-model:pageSize="queryForm.pageSize"
              :total="total"
              @change="queryData"
              @showSizeChange="queryData"
              :show-total="(total) => `共${total}条`"
            />
        </div>
      </div>
    </div>

    <template #footer class="footer">
      <a-button type="primary" danger class="delete" @click="onDelete">
        <template #icon> <CloseCircleOutlined /></template>删除
      </a-button>
    </template>
  </a-modal>
</template>
 
<script setup>
import { reactive, ref, nextTick, inject, onMounted} from 'vue';
import _ from 'lodash';
import { message, Modal } from 'ant-design-vue';
import { SmartLoading } from '/@/components/framework/smart-loading';
import { smartSentry } from '/@/lib/smart-sentry';
import { casePicApi } from '/@/api/business/casepic/case-pic-api';
import { PAGE_SIZE } from '/@/constants/common-const';

// 左侧table数据
 
const columns = reactive([
  {
    title: '序号',
    dataIndex: 'num',
    ellipsis: true,
  },
  {
    title: '单据名称',
    dataIndex: 'typeName',
    ellipsis: true,
  },
  {
    title: '采集日期',
    dataIndex: 'enteredTime',
    ellipsis: true,
  },
]);
// table表点击样式，单双行样式
const currentRow = ref();
const tableData = ref([]);
 
  // 表格加载loading
  const tableLoading = ref(false);

function rowClick(record, index) {
  return {
    onClick: () => {
      console.log(record);
      currentRow.value = record;
    }, 
  };
}

function setRowClassName(record, index) {
  let rowColor = index % 2 === 0 ? 'evenRowStyl' : ''; //判断单双行，赋予不同样式
  return record === currentRow.value ? 'clickRowStyl' : rowColor; //赋予点击行样式
}

// ------------------------ 事件 ------------------------

const emits = defineEmits(['reloadList']);

// ------------------------ 显示与隐藏 ------------------------
// 是否显示
const visibleFlag = ref(false);

function show(rowData) {
  console.log(rowData);
  Object.assign(form, formDefault);
  if (rowData && !_.isEmpty(rowData)) {
    Object.assign(form, rowData);
  }
  visibleFlag.value = true;
  queryForm.patientId = form.patientId
  queryForm.visitId = form.visitId
  queryData()
  
}

function onClose() {
  Object.assign(form, formDefault);
  visibleFlag.value = false;
}
//确认删除
function onDelete(data) {
  Modal.confirm({
    title: '提示',
    content: '确定要删除选吗?',
    okText: '删除',
    okType: 'danger',
    onOk() {
      requestDelete();
    },
    cancelText: '取消',
    onCancel() {},
  });
}
  //请求删除
  async function requestDelete(){
        SmartLoading.show();
        try {
          
            await casePicApi.delete(currentRow.value.id);
            message.success('删除成功');
            queryData()
        } catch (e) {
            smartSentry.captureError(e);
        } finally {
            SmartLoading.hide();
        }
    }

// ------------------------ 表单 ------------------------

// 组件ref
const formRef = ref();

const formDefault = {
  name: undefined,
  patientId: undefined, //病人id
  visitId:undefined
};

let form = reactive({
  ...formDefault,
});

// const refresh = inject('reload');

 
    // 总数
    const total = ref(0);

// onMounted();

    const queryFormState = {
        type: undefined, //类型
        code: undefined, //编号
        patientId: undefined, //病人id
        visitId: undefined, //住院次数
        enteredTime: undefined, //录入时间
        inpNo: undefined, //住院号
        pageSizeOptions:['10','20','30'],
        pageNum: 1,
        pageSize: PAGE_SIZE,
        sortItemList: undefined,
    };
    // 查询表单form
    const queryForm = reactive({ ...queryFormState });
    // 查询数据
    async function queryData() {
        tableLoading.value = true;
        try {
            let queryResult = await casePicApi.queryPage(queryForm);
            console.log(queryResult.data.list)
            // queryResult.data.list.sort(function(a, b) {
            //   let aTimeString = a.enteredTime;
            //   let bTimeString = b.enteredTime;
            //   let aTime = new Date(aTimeString).getTime();
            //   let bTime = new Date(bTimeString).getTime();
            //   return bTime - aTime;
            // });
            if(queryResult.data.list.length<=0){
              tableData.value = queryResult.data.list;
              total.value = queryResult.data.total;
            }else{
              tableData.value = queryResult.data.list;
              total.value = queryResult.data.total;
            }
        } catch (e) {
            smartSentry.captureError(e);
        } finally {
            tableLoading.value = false;
        }
    }

defineExpose({
  show,
});
</script>

<style lang="less">
.ant-modal-content {
  width: 100%;
  height: 100%;
}

.ant-modal-body {
  width: 100%;
  position: relative;
  padding: 0 24px;
}

.title {
  font-size: 16px;
  font-weight: 500;
  padding: 10px 0;
  margin-bottom: 15px;
  border-bottom: 1px solid #e6e6e6;
}
/* 点击行的样式 */

.clickRowStyl {
  background-color: #94c4f0 !important;
}
/* 偶数行的样式 */

.evenRowStyl {
  background-color: #f4fcfc !important;
}

.ant-table-striped {
  position: relative;
}

.ant-table-striped .ant-table-tbody > tr:hover:not(.ant-table-expanded-row) > td {
  background: #94c4f0;
}

.ant-modal-footer {
  position: absolute;
  right: 30%;
}
</style>

Answer 1

你要在 Table 组件中，加一个 change 事件：

<a-table
  ...
  @change="handleTableChange"
>
</a-table>

然后调用 queryData 函数请求新的数据。

function handleTableChange(pagination, filters, sorter) {
  // 如果有排序信息，则更新查询表单
  if (sorter.order) {
    queryForm.sortItemList = [
      {
        column: sorter.field,
        order: sorter.order === "ascend" ? "ASC" : "DESC",
      },
    ];
  } else {
    // 否则，清除排序信息
    queryForm.sortItemList = [];
  }

  // 请求新的数据
  queryData();
}

在发送请求时，把排序信息一并发送到服务器：

async function queryData() {
  // ...
  try {
    let queryResult = await casePicApi.queryPage(queryForm);
    // ...
  } catch (e) {
    // ...
  } finally {
    // ...
  }
}