【技术难题】el-table的全局数据排序实现示例,不受分页影响,以及异步请求带来的页面渲染问题

参考链接:https://blog.csdn.net/qq_35770559/article/details/131183121

问题代码

编辑页面detail.vue

<el-form title="列表信息" name="detail"><el-form><el-form-item><el-buttontype="cyan"icon="el-icon-plus"size="mini"@click="openProduct">选择商品</el-button></el-form-item></el-form><el-tableref="inBillDetailTabless":data="addup == '2' ? dataList : addList"max-height="450"stripev-loading="loading"@sort-change="sortChange"><el-table-column align="center" label="商品sku" width="180"prop="skuCode"><!-- <template slot-scope="scope"><el-form :model="scope.row"><el-form-item prop="skuCode"><el-inputv-model="scope.row.skuCode"clearable:disabled="disabled"></el-input></el-form-item></el-form></template> --></el-table-column><el-table-column align="center" label="商品名称" width="180"prop="skuName"><el-table-columnlabel="操作"fixed="right"align="center"class-name="small-padding fixed-width"><template slot-scope="scope"><el-buttonsize="mini"type="text"@click="delDetail(scope.$index, scope.row)">删除</el-button></template></el-table-column></el-table>调用事件:
// 排序改变sortChange(row) {// 显示加载状态,提升用户体验this.loading = true;const { column, prop, order } = row//column表示选中排序列的详细信息,prop表示选中的拍序列,order表示选中拍序列的排序规则// 其他代码逻辑if (!order) return; // 无排序时直接返回if(order){console.log("===allMySort", row)allMySort({items:this.form.items,orderBy:order}).then((res) => {console.log(" res.data",JSON.stringify( res))// this.$nextTick()this.form.items = res.data;//根据addup类型更新列表// 列表查询方法if (this.addup == "1") {this.total=this.form.items.lengththis.addList = this.form.items.slice((this.queryParams.pageNum - 1) * this.queryParams.pageSize,this.queryParams.pageNum * this.queryParams.pageSize);}//if (this.addup == "1") this.form.items=array;

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

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

相关文章

非功能测试

非功能测试范畴&#xff1a;界面测试&#xff0c;易用性测试&#xff0c;兼容性测试&#xff0c;文档测试&#xff0c;安装/卸载测试等等 界面测试 1.窗体界面测试 1.窗体定义&#xff1a;指整个软件窗口&#xff0c;也可称为窗口&#xff0c;是界面测试的基本单位 2.控件分…

一起endpoint迷路的问题排查总结

今天上班&#xff0c;一到工位上&#xff0c;就有同事和我说有客户反映自己的容器的一些指标在监控平台不上报了&#xff0c;我当时一看机器所在的监控&#xff0c;发现确实是这样 确实存在某个点开始数据就没了&#xff0c;主要这个点当时也没有任何的操作变更&#xff0c;于…

官方 Linker Scripts 语法和规则解析(2)

系列文章目录 官方 Linker Scripts 语法和规则解析&#xff08;1&#xff09; 官方 Linker Scripts 语法和规则解析&#xff08;2&#xff09; 官方 Linker Scripts 语法和规则解析&#xff08;3&#xff09; 链接脚本(Linker Scripts)语法和规则解析(自官方手册) 7.9. 链接脚…

CentOS 7 通过YUM安装MySQL 8.0完整指南

一、准备工作&#xff1a;更新系统与YUM源 # 1. 更换阿里云镜像源 wget -O /etc/yum.repos.d/CentOS-Base.repo http://mirrors.aliyun.com/repo/Centos-7.repo# 2. 清理并重建缓存 yum clean all yum makecache# 3. 升级系统所有包 yum -y update 二、安装MySQL 8.0 1. 下载…

qq邮箱 新版 怎么去掉个性签名?

qq邮箱 新版 怎么去掉个性签名&#xff1f; 新版的qq邮箱&#xff0c;用着还不错&#xff0c;特别是搜索&#xff0c;比以前好多&#xff0c;以前加载的时候&#xff0c;搜索框里有一行字&#xff0c;加载不完&#xff0c;就没法搜索&#xff0c;特别菜。现在好多了。 不过现在…

C++:string类(1)

一.初步了解STL STL是Standard Template Library的缩写&#xff0c;中文译为标准模板库&#xff0c;是C标准库的重要组成部分。它本质上是一套基于模板的通用编程工具&#xff0c;通过模板技术实现了数据结构和算法的抽象与复用&#xff0c;让开发者无需重复编写基础功能&…

如何避免静态变量初始化中的异常

确保初始化表达式的安全性 基本数据类型初始化 对于基本数据类型&#xff08;如int、double、boolean等&#xff09;的静态变量初始化&#xff0c;要确保赋值的表达式是合法的。例如&#xff0c;在初始化一个int类型的静态变量时&#xff0c;避免出现除数为零的情况。 class Sa…

【151】基于Springboot+Vue实现的校园订餐管理系统小程序(有文档+PPT+视频)

系统介绍 视频演示 基于SpringbootVue实现的校园订餐管理系统小程序&#xff08;有文档PPT视频&#xff09; 基于SpringbootVue实现的校园订餐管理系统小程序采用前后端分离的架构方式&#xff0c;系统设计了管理员、商家、用户三种角色&#xff0c;系统分为管理端、小程序端&…

从 0 到 1:基于 Qwen3 Embedding 的 RAG 智能问答系统搭建指南

RAGFlow 是一个基于深度文档理解的开源 RAG&#xff08;检索增强生成&#xff09;引擎。 与 LLM 集成后&#xff0c;它能够提供真实的问答功能&#xff0c;并以来自各种复杂格式数据的可靠引用为支撑。 教程链接&#xff1a;OpenBayes 控制台 使用云平台:OpenBayes signup -…

Prompt Distillation for Efficient LLM-based Recommendation

题目 基于LLM的高效推荐的快速蒸馏 论文地址&#xff1a;https://dl.acm.org/doi/10.1145/3583780.3615017 摘要 大语言模型&#xff08;LLM&#xff09;在各种任务上表现出了无与伦比的建模能力&#xff0c;例如多步推理&#xff0c;但是这些模型的输入大部分仅限于纯文本&am…

JDBC 工具类:1.0到3.0版本

一、引言 在 Java 开发中&#xff0c;与数据库的交互是一项常见且重要的任务。JDBC&#xff08;Java Database Connectivity&#xff09;作为 Java 语言访问数据库的标准 API&#xff0c;为我们提供了统一的接口来操作各种数据库。然而&#xff0c;每次进行数据库操作都编写大…

实验室建设案例 | 洛阳职业技术学院—人工智能实验室

院校简介 洛阳职业技术学院位于千年古都、牡丹花城、丝路起点洛阳&#xff0c;是一所由洛阳市政府举办的公办高职院校&#xff0c;成立于2011年&#xff0c;办学历史可追溯到1945年的豫西公学。学校全面贯彻党的教育方针&#xff0c;围绕落实立德树人根本任务&#xff0c;秉承“…

vue2中,修改对象数组中元素对应的属性,页面不更新的问题解决

有如下代码&#xff1a; // 有一个数组 let dataAry [{name: haha, age: 20},{name: hello, age: 21} ] // 这个数组在模板中使用了v-for进行循环 v-for"one of dataAry" :name"one.name" :address"one.address"// 子组件中使用如下&#xff…

代理模式:控制对象访问的守门员[特殊字符],优雅实现功能增强与访问控制!

代理模式&#xff1a;控制对象访问的守门员&#x1f510;&#xff0c;优雅实现功能增强与访问控制&#xff01; 文章目录 代理模式&#xff1a;控制对象访问的守门员&#x1f510;&#xff0c;优雅实现功能增强与访问控制&#xff01;前言&#xff1a;为什么需要代理&#xff1…

《人间词话》PPT课件

《人间词话》简介 《人间词话》是王国维所著的一部文学批评著作。《人间词话》作于1908&#xff5e;1909年&#xff0c;最初发表于《国粹学报》。该作是作者接受了西洋美学思想之洗礼后&#xff0c;以崭新的眼光对中国旧文学所作的评论。 《人间词话》PPT课件下载 夸克网盘分享…

解剖智能运维三基石:Metrics/Logs/Traces

3秒知识卡 三基石关系&#xff1a; Metrics&#xff08;指标&#xff09;→ 系统脉搏&#xff08;CPU/错误率&#xff09; Logs&#xff08;日志&#xff09;→ 事件日记&#xff08;错误堆栈/用户行为&#xff09; Traces&#xff08;追踪&#xff09;→ 血缘地图&#xff08;…

从代码学习深度学习 - 情感分析:使用卷积神经网络 PyTorch版

文章目录 前言加载数据集一维卷积最大时间汇聚层textCNN模型定义模型加载预训练词向量训练和评估模型总结前言 在之前的章节中,我们探讨了如何使用循环神经网络(RNN)来处理序列数据。今天,我们将探索另一种强大的模型——卷积神经网络(CNN)——并将其应用于自然语言处理…

深入解析分布式训练基石:ps-lite源码实现原理

分布式机器学习框架是现代推荐、广告和搜索系统的核心支撑。面对海量训练数据和高维稀疏特征&#xff0c;参数服务器&#xff08;Parameter Server, PS&#xff09; 架构应运而生。作为早期经典实现的ps-lite因其简洁性和完整性&#xff0c;成为理解PS原理的绝佳切入点。本文将…

IDEA 插件开发:Internal Actions 与 UI Inspector 快速定位 PSI

在开发 IntelliJ 平台插件的过程中&#xff0c;你常常需要搞清楚 某个 IDE 弹框背后是如何操作 PSI&#xff08;Program Structure Interface&#xff09; 的。下面这篇笔记将介绍如何通过 Internal Actions、UI Inspector 以及调试技巧快速定位 PSI 调用链。 1. 启用 Internal…

26考研|数学分析:多元函数微分学

前言 本章我们将进行多元函数微分学的学习&#xff0c;多元函数微分学与一元函数微分学相对应&#xff0c;涉及到可微性、中值定理、泰勒公式等诸多问题的探讨与研究&#xff0c;本章难度较大&#xff0c;在学习过程中需要进行深度思考与分析&#xff0c;才能真正掌握这一章的…