翼度科技»论坛 编程开发 JavaScript 查看内容

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

6

主题

6

帖子

18

积分

新手上路

Rank: 1

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

修改后:

  1. <template>
  2.    <el-table
  3.       :data="stateTable.table.data"
  4.       @sort-change="(data) => handleSort(data, stateTable)"
  5.     >
  6.   </el-table>
  7. <template>
  8. <script setup>
  9. import { reactive } from "vue";
  10. import { copyTableData, handleSort } from "@/hooks/useSortTable.js";
  11. let stateTable = reactive({
  12.   table: {
  13.     border: true,
  14.     currentPage: 1,
  15.     pageSize: 10,
  16.     // 接口返回数据
  17.     data: [],
  18.     // 表头数据
  19.     columns: [],
  20.   },
  21. });
  22. const getTableData = async (data) => {
  23.    copyTableData.value = [...stateTable.table.data]
  24. };
  25. getTableData()
  26. </script>
复制代码
useSortTable.js
  1. import { ref } from "vue";
  2. export const copyTableData = ref([]);
  3. export const sortByFieldDesc = (arr, field, order) => {
  4.   arr.sort((a, b) => {
  5.     const aValue = a?.[field];
  6.     const bValue = b?.[field];
  7.     let numA =
  8.       typeof aValue === "string" && !isNaN(Number(aValue))
  9.         ? Number(aValue)
  10.         : aValue;
  11.     let numB =
  12.       typeof bValue === "string" && !isNaN(Number(bValue))
  13.         ? Number(bValue)
  14.         : bValue;
  15.     if (
  16.       typeof numA === "string" &&
  17.       typeof numB === "string" &&
  18.       !isNaN(Date.parse(numA)) &&
  19.       !isNaN(Date.parse(numB))
  20.     ) {
  21.       // 如果是日期类型的字符串,则按照日期排序
  22.       const dateA = new Date(numA);
  23.       const dateB = new Date(numB);
  24.       if (order === "descending") {
  25.         return dateB - dateA;
  26.       } else {
  27.         return dateA - dateB;
  28.       }
  29.     } else {
  30.       // 非日期类型,按照数字或其他类型的逻辑排序
  31.       if (order === "descending") {
  32.         return numB - numA;
  33.       } else {
  34.         return numA - numB;
  35.       }
  36.     }
  37.   });
  38.   return arr;
  39. };
  40. // 修改handleSort函数,使其接受stateTable作为参数
  41. export const handleSort = (data, stateTable) => {
  42.   const { prop, order } = data;
  43.   let reserveData = copyTableData.value.filter(
  44.     (item) =>
  45.       item?.[prop] !== undefined &&
  46.       item?.[prop] !== null &&
  47.       item?.[prop] !== "-"
  48.   );
  49.   let filterData = copyTableData.value.filter(
  50.     (item) =>
  51.       item?.[prop] === undefined ||
  52.       item?.[prop] === null ||
  53.       item?.[prop] === "-"
  54.   );
  55.   if (order !== null) {
  56.     sortByFieldDesc(reserveData, prop, order);
  57.     stateTable.table.data = reserveData.concat(filterData);
  58.   } else {
  59.     stateTable.table.data = [...copyTableData.value];
  60.   }
  61. };
复制代码
到此这篇关于element-plus 官方表格排序问题的文章就介绍到这了,更多相关element-plus 官方表格排序内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

来源:https://www.jb51.net/javascript/328885rse.htm
免责声明:由于采集信息均来自互联网,如果侵犯了您的权益,请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容,谢谢合作!

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有账号?立即注册

x

举报 回复 使用道具