上海协策网站制作网站建设黄页

element-plus 官方API 默认表格排序存在问题，一个list 被多组排序

 修改后：

注意点： 这里一定要使用  sortable="custom"，自定义  sort-change 方法  使用  sortable true 的情况排序会冲突，出现莫名奇妙的问题

<template><el-table:data="stateTable.table.data"@sort-change="(data) => handleSort(data, stateTable)"><el-table-columnsortable="custom"prop="collect_at"label="时间"></el-table-column></el-table>
<template><script setup>
import { reactive, nextTick } from "vue";
import { copyTableData, handleSort } from "@/hooks/useSortTable.js";let stateTable = reactive({sortColumnData: null,table: {border: true,currentPage: 1,pageSize: 10,// 接口返回数据data: [],// 表头数据columns: [],},
});const getTableData = async (data) => {copyTableData.value = [...stateTable.table.data]//获取完数据，手动调用下排序方法，主要用于重新查询，切换分页等情况nextTick(()=>{if(stateTable.sortColumnData) handleSort(stateTable.sortColumnData, stateTable)})
};getTableData()
</script>

useSortTable.js

import { ref } from "vue";export const copyTableData = ref([]);export const sortByFieldDesc = (arr, field, order) => {arr.sort((a, b) => {const aValue = a?.[field];const bValue = b?.[field];let numA =typeof aValue === "string" && !isNaN(Number(aValue))? Number(aValue): aValue;let numB =typeof bValue === "string" && !isNaN(Number(bValue))? Number(bValue): bValue;if (typeof numA === "string" &&typeof numB === "string" &&!isNaN(Date.parse(numA)) &&!isNaN(Date.parse(numB))) {// 如果是日期类型的字符串，则按照日期排序const dateA = new Date(numA);const dateB = new Date(numB);if (order === "descending") {return dateB - dateA;} else {return dateA - dateB;}} else {// 非日期类型，按照数字或其他类型的逻辑排序if (order === "descending") {return numB - numA;} else {return numA - numB;}}});return arr;
};// 修改handleSort函数，使其接受stateTable作为参数
export const handleSort = (data, stateTable) => {const { prop, order } = data;stateTable.sortColumnData = data;let reserveData = copyTableData.value.filter((item) =>item?.[prop] !== undefined &&item?.[prop] !== null &&item?.[prop] !== "-");let filterData = copyTableData.value.filter((item) =>item?.[prop] === undefined ||item?.[prop] === null ||item?.[prop] === "-");if (order !== null) {sortByFieldDesc(reserveData, prop, order);stateTable.table.data = reserveData.concat(filterData);} else {stateTable.table.data = [...copyTableData.value];}
};