element-plus 官方表格排序问题小结

2024-11-3 09:59| 发布者: 2ae29| 查看: 66| 评论: 0

摘要: element-plus 官方API 默认表格排序存在问题，一个list 被多组排序修改后： [code]<template> <el-table :data="stateTable.table.data" @sort-change="(data) => handleSort(data, stateT

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

修改后：

[code]<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>[/code]

useSortTable.js

[code]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]; } };[/code]

到此这篇关于element-plus 官方表格排序问题的文章就介绍到这了,更多相关element-plus 官方表格排序内容请搜刮脚本之家从前的文章或继续浏览下面的相关文章渴望大家以后多多支持脚本之家！

来源：https://www.jb51.net/javascript/328885rse.htm
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

收藏分享邀请

上一篇：详解uniapp怎样办理H5页面双标题下一篇：vue3 el-table 怎样通过深度选择器::v-deep修改组件内部样式(默认样式)

账号		自动登录	找回密码
密码			立即注册

element-plus 官方表格排序问题小结

相关分类

站长推荐 /6