element-plus 官方表格排序问题

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];}
};

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/454044.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Oracle SQL练习题,从小白到入门 - 上

从事DBA以来&#xff0c;越来越认识到自己SQL水平不足&#xff0c;想想sql语句还停留在大二寒假学习的黑马的Mysql《Mysql 十天精通》基础篇进阶篇&#xff0c;将近100集一天就学完了&#xff0c;黑马yyds。 再后来&#xff0c;做项目用Spring的MyBatis是真的香&#xff0c;练…

string类的学习(上)

string类与我们再C语言中接触到的字符串数据相似&#xff0c;但是做出了一些重大的提升&#xff0c;封装为类&#xff0c;实现了总多的接口&#xff0c;丰富了其功能&#xff0c;为简化了字符串的使用&#xff0c;那现在我们就开始深入学习string类吧。 1.什么事string类 C语言…

Java项目:155 springboot酒店管理系统(含论文+ppt+开题报告+说明文档)

作者主页&#xff1a;源码空间codegym 简介&#xff1a;Java领域优质创作者、Java项目、学习资料、技术互助 文中获取源码 项目介绍 ​ 后台&#xff1a; 1.登录&#xff1a;输入账号、密码&#xff0c;即可登录。 2.套房管理&#xff1a;可对房间房型进行管理。 3.入住管…

elk部署安装

elk部署 前提准备1、elasticsearch2、kibana3、logstash 前提准备 1、提前装好docker docker-compose相关命令 2、替换docker仓库地址国内镜像源 cd /etc/docker vi daemon.json # 替换内容 {"registry-mirrors": [ "https://docker.1panel.dev", "ht…

L1练习-鸢尾花数据集处理(分类/聚类)

背景 前文&#xff08;《AI 自学 Lesson1 - Sklearn&#xff08;开源Python机器学习包&#xff09;》&#xff09;以鸢尾花数据集的处理为例&#xff0c;本文将完善其代码&#xff0c;在使用 sklearn 的部分工具包基础上&#xff0c;增加部分数据预处理、数据分析和数据可视化…

FL Studio 2024 发布,添加 FL Cloud 插件、AI 等功能

作为今年最受期待的音乐制作 DAW 更新之一&#xff0c;FL Studio 2024发布引入了新功能&#xff0c;同时采用了新的命名方式&#xff0c;从现在起将把发布年份纳入其名称中。DAW 的新增功能包括在 FL Cloud 中添加插件、AI 驱动的音乐创作工具和 FL Studio 的新效果。 FL Clou…

Java 解决阿里云OSS服务器私有权限图片通过URL无法预览的问题

简单描述一下此场景的业务: 由于系统中需要将上传的图片在系统中展示(private私有权限不能直接通过url直接展示),不想通过先下载下来然后以流的形式返回给前台展示这种方法很不友好,毕竟现在前台展示方式都是通过图片URL进行展示,所以就上官网查看API文档,果然找到了解决…

视频美颜平台是如何搭建的?基于直播美颜SDK源码的开发技术详解

今天&#xff0c;笔者将详细讲解如何基于直播美颜SDK源码搭建视频美颜平台的技术路径。 一、理解视频美颜技术 视频美颜技术主要通过图像处理算法对视频流进行实时处理&#xff0c;包括肤色优化、瑕疵修复、面部特征增强等。实现这一目标需要高效的图像处理算法和稳定的实时渲…

电脑异常情况总结

文章目录 笔记本无症状息屏黑屏 笔记本无症状息屏黑屏 &#x1f34e; 问题描述&#xff1a; 息屏导致黑屏&#xff1b;依次操作计算机--》右键--》管理--》事件查看器--》Windows日志--》系统&#xff1b;从息屏到异常黑屏之间出现了很多错误&#xff0c;如下&#xff1a;事件…

大规模创新类竞赛评审方案的建模与研究

随着科技的发展和教育制度的改革&#xff0c;近年来涌现出一批以“创新”为主题的竞赛项目。这类竞赛的运行模式为&#xff0c;参赛队伍提交文档、视频或幻灯片等文本形式的作品&#xff0c;专家对参赛队伍提交的作品评阅判分&#xff0c;一份作品将由多位专家独立进行评阅打分…

WPF入门_04绑定

WPF绑定使得原本需要多行代码实现的功能,现在只需要简单的XAML代码就可以完成之前多行后台代码实现的功能。WPF绑定可以理解为一种关系,该关系告诉WPF从一个源对象提取一些信息,并将这些信息来设置目标对象的属性。 目标属性总是依赖属性。然而,源对象可以是任何内容,可以…

mysql8以上版本第一次下载后的登录问题

mysql8以上版本第一次下载后的登录问题 在官网下载mysql后&#xff0c;按照MySQL下载和安装教程操作就可以 如果出现问题&#xff0c;参考https://blog.csdn.net/weixin_63107823/article/details/136588474 注意ini配置文件&#xff0c;如果你是复制的别人的代码&#xff0…

一些简单的编程题(Java与C语言)

引言&#xff1a; 这篇文章呢&#xff0c;小编将会举一些简单的编程题用来帮助大家理解一下Java代码&#xff0c;并且与C语言做个对比&#xff0c;不过这篇文章所出现的题目小编不会向随缘解题系列里面那样详细的讲解每一到题&#xff0c;本篇文章的主要目的是帮助小编和读者们…

算法魅力-双指针的实战

目录 1.双指针的介绍 1. 左右指针&#xff08;对撞指针&#xff09; 2. 快慢指针 2.题目练习讲解 2.1 移动零 算法思路 代码展示 画图效果效果 2.2 复写零 算法思路 代码展示 2.3 快乐数 算法思路 代码展示 2.4 盛最多水的容器 算法思路 代码展示 结束语 1.双指针的…

LeetCode第101题. 对称二叉树

文章目录 &#x1f60a;1.题目&#x1f609;2.解法 &#x1f60a;1.题目 尝试一下该题 &#x1f609;2.解法 /*** Definition for a binary tree node.* struct TreeNode {* int val;* struct TreeNode *left;* struct TreeNode *right;* };*/ bool isSameTree…

考研读研生存指南,注意事项

本视频课程&#xff0c;涉及考研读研的方方面面&#xff0c;从考研初试→复试面试→研究生生活→导师相处→论文专利写作混毕业&#xff0c;应有尽有。有了他&#xff0c;你的研究生生涯稳了。 读研考研注意事项&#xff0c;研究生生存指南。_哔哩哔哩_bilibili 一、考研初试注…

数据泄露危机:提升文件安全意识的紧迫性

在当今数字化时代,数据已成为企业最宝贵的资产之一。然而,随着技术的进步,数据泄露事件的频率和规模也在不断攀升。这不仅给企业带来巨大的经济损失,还可能导致声誉受损、客户流失等一系列严重后果。因此,提升文件安全意识,加强数据保护措施,已成为企业管理中不可忽视的重要议题…

【人工智能】Transformers之Pipeline(二十):令牌分类(token-classification)

目录 一、引言 二、令牌分类&#xff08;token-classification&#xff09; 2.1 概述 2.2 Facebook AI/XLM-RoBERTa 2.3 pipeline参数 2.3.1 pipeline对象实例化参数 2.3.2 pipeline对象使用参数 2.3.3 pipeline返回参数 ​​​​​​​​​​​​​​ 2.4 pipeline…

Spring Boot 3.3 【八】整合实现高可用 Redis 集群

一、引言 在当今快速发展的软件开发领域&#xff0c;系统的性能和可靠性至关重要。Springboot 3 整合 Redis 7 集群具有多方面的重大意义。 首先&#xff0c;随着业务的不断发展&#xff0c;数据量呈爆炸式增长&#xff0c;单个 Redis 服务器往往难以满足存储和处理需求。Red…

docker-harbor

目录 一、registry 二、harbor 1.部署 harbor 1.1部署Docker-Compose 1.2部署 Harbor 服务 1.3在其他客户端上传镜像 三、维护管理Harbor 1. 创建 Harbor 用户 2.添加项目成员 3. 在客户端上使用普通账户操作镜像 4. 查看日志 5. 修改 Harbor.cfg 配置文件 6. 移除…