我要评论element-plus 官方api 默认表格排序存在问题，一个list 被多组排序
修改后：
<template>
<el-table
:data="statetable.table.data"
@sort-change="(data) => handlesort(data, statetable)"
>
</el-table>
<template>
<script setup>
import { reactive } from "vue";
import { copytabledata, handlesort } from "@/hooks/usesorttable.js";
let statetable = reactive({
table: {
border: true,
currentpage: 1,
pagesize: 10,
// 接口返回数据
data: [],
// 表头数据
columns: [],
},
});
const gettabledata = async (data) => {
copytabledata.value = [...statetable.table.data]
};
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;
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];
}
};到此这篇关于element-plus 官方表格排序问题的文章就介绍到这了,更多相关element-plus 官方表格排序内容请搜索代码网以前的文章或继续浏览下面的相关文章希望大家以后多多支持代码网！
发表评论