提升Element UI分页查询用户体验与交互：实现修改未保存提示

        我实现的功能是在 element ui 的分页组件中进行分页查询时，如果当前有未保存的修改数据就提示用户，用户可以选择是否放弃未保存的数据。确认放弃就重新查询数据；选择不放弃，不重新查询，并且显示条数选择框保持原样（选择框中文字与选择列表中选择项），页数跳转也是同样的功能。

例子说明：当我们修改了表单某项数据但未保存时。
        更改每页显示条数：我们点击显示条数选择框的 '20条/页'，此时会弹出一个提示如图。选择确定就重新查询渲染，未保存数据就丢失了；选择取消的话，不重新查询，并且显示条数保持 '10条/页'，打开选择列表也是 '10条/页'。

        页数跳转：我们点击第二页或者下一页按钮，同样跳出提示如图，选择确定就重新查询渲染，未保存数据就丢失了；选择取消的话，不重新查询，并且仍然选中的是第一页。

动态演示： 

      

        首先我们要如何判断用户修改了表单呢？我采用的方法是在查询数据时，深拷贝一份返回的数组数据。然后在分页改变时对比两者。

 <el-pagination@size-change="handleSizeChange"@current-change="handlePageChange":current-page.sync="currentPage":page-sizes="[10, 20, 40, 80]":page-size="pageSize":total="totalCount"layout="sizes, prev, pager, next"></el-pagination>
 data() {return {currentPage: 1,cachedPage: 1,pageSize: 10,cachedPageSize: 10,totalCount: 0,loading: false, // 是否显示加载中originalData: [],formData: {tableData: [],rules: {}}}},methods: {handleSizeChange(val) {if (!this.isEqual()) {this.$confirm("当前有未保存数据，确定要继续吗?", "提示", {confirmButtonText: "确定",cancelButtonText: "取消",type: "warning"}).then(() => {this.cachedPageSize = val;this.pageSize = val;this.getData();}).catch(() => {this.pageSize = this.cachedPageSize;})} else {this.cachedPageSize = val;this.pageSize = val;this.getData();}},handlePageChange(val) {if (!this.isEqual()) {this.$confirm("当前有未保存数据，确定要继续吗?", "提示", {confirmButtonText: "确定",cancelButtonText: "取消",type: "warning"}).then(() => {this.cachedPage = val;this.currentPage = val;this.getData();}).catch(() => {this.currentPage = this.cachedPage;})} else {this.cachedPage = val;this.currentPage = val;this.getData();}},// 判断表单数据是否改变isEqual() {for (let i in this.formData.tableData) {const obj = this.formData.tableData[i];for (let key in obj)if (obj[key] === "") obj[key] = null; // 属性值为null经过修改再删除会变为"",故将两者看做相等}const newData = this.formData.tableData.map((obj) => {const newObj = Object.assign({}, obj);delete newObj.changed; // changed是告诉后端那些项修改了 对比时要删除return newObj;})return JSON.stringify(newData) === JSON.stringify(this.formData.tableData);},async getData() {const isLoading = this.loading("加载中");const params = {page: this.currentPage,page_size: this.pageSize}const { code, data, count } = await getDataList(params); // 请求列表数据if (code == 200) {this.originalData = JSON.parse(JSON.stringify(data));this.$set(this.formData, "tableData", data);this.totalCount = count;isLoading.close();}}}

        这样修改后，页数跳转可以恢复原来的页数，但是 '条/页' 没有恢复。

         又从F12里查找对应 dom 元素尝试进行修改，获取 el-pagination 的引用，并且给分页选择框加上类属性 one 来方便获取。    

 <el-paginationref="pagination"@size-change="handleSizeChange"@current-change="handlePageChange":current-page.sync="currentPage":page-sizes="[10, 20, 40, 80]":page-size="pageSize":total="totalCount"layout="sizes, prev, pager, next":popper-class="'one'"></el-pagination>.catch(() => {this.pageSize = this.cachedPageSize;const pagination = this.$refs.pagination;const select = pagination.$el.querySelector(".one .el-input__inner");select.value = `${this.cachedPageSize}条/页`;const ul = document.querySelector(".el-select-fropdown__list");const fn = () => {const lis = ul.querySelectorAll("li");lis.forEach(li => {li.classList.remove("selected");})const arr = [10, 20, 40, 80];let index = arr.indexOf(this.pageSize);let changedLi = lis[index];changedLi.classList.add("selected");}fn();ul.addEventListener("mouseover", fn);})

        结果显示看着是符合的，但是选择 '20条/页' 后取消，应该是 '10条/页' 无法点击，'20条/页' 可以点击，但是结果是 '10条/页' 可以点, '20条/页' 无法点，即虽然改变了样式，但是 element ui 仍然认为我们点击了 '20条/页'，现在处于 '20条/页'。

         感觉只能去修改 element ui 的源码逻辑了，否则无法满足我的需求；要么就自己写一个分页组件。这时，我突然想到正常的每页显示条数我们每次点击后，不是会自己自动跳转到对应的 '条/页' 吗。于是想到了我直接将对应原来的 '条/页' 的 li 标签触发一次 click ，然后跳过提示弹框与重新请求数据不就好了吗？

data中新增 changedFlag: false,handleSizeChange(val) {if (!this.changedFlag && !this.isEqual()) {this.$confirm("当前有未保存数据，确定要继续吗?", "提示", {confirmButtonText: "确定",cancelButtonText: "取消",type: "warning"}).then(() => {this.cachedPageSize = valthis.pageSize = valthis.getData()}).catch(() => {this.pageSize = this.cachedPageSize;const ul = document.querySelector(".one .el-select-fropdown__list");const lis = ul.querySelectorAll("li");const arr = [10, 20, 40, 80];let index = arr.indexOf(this.pageSize);let changedLi = lis[index];this.changedFlag = true;changedLi.click();})} else { // 判断是否是changedLi触发clickif (this.cachedPageSize == val) {this.changedFlag = false;this.pageSize = val}else {this.changedFlag = false;this.cachedPageSize = val;this.pageSize = val;this.getData();}}},

        最终达到想要的效果：

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

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

相关文章

爬虫009_字符串高级_替换_去空格_分割_取长度_统计字符_间隔插入---python工作笔记028

爬虫009_字符串高级_替换_去空格_分割_取长度_统计字符_间隔插入---python工作笔记028

然后再来看字符串的高级操作 取长度 查找字符串下标位置 判断是否以某个字符,开头结尾 计算字符出现次数 替换
阅读更多...
CAPL - XML和TestModule结合实现测试项可选

CAPL - XML和TestModule结合实现测试项可选

目录 目的：是否想实现如下面的功能呢？ 一、.can和.cin文件中函数开发
阅读更多...
AI Chat 设计模式：12. 享元模式

AI Chat 设计模式：12. 享元模式

本文是该系列的第十二篇&#xff0c;采用问答式的方式展开&#xff0c;问题由我提出&#xff0c;答案由 Chat AI 作出&#xff0c;灰色背景的文字则主要是我的一些思考和补充。 问题列表 Q.1 给我介绍一下享元模式A.1Q.2 也就是说&#xff0c;其实共享的是对象的内部状态&…
阅读更多...
pycharm的Terminal中如何设置打开anaconda3的虚拟环境

pycharm的Terminal中如何设置打开anaconda3的虚拟环境

在pycharm的File -> Settings -> Tools -> Terminal下面&#xff0c;如下图所示 修改为红框中内容&#xff0c;然后关闭终端在重新打开终端&#xff0c;即可看到anaconda3的虚拟环境就已经会被更新
阅读更多...
谈谈对Spring MVC的理解

谈谈对Spring MVC的理解

问题分析&#xff1a; SpringMVC 是一种基于 Java 语言开发&#xff0c;实现了 Web MVC 设计模式&#xff0c;请求驱动类型 的轻量级 Web 框架。 SpringMVC采用了 MVC 架构模式的思想&#xff0c;通过把 Model&#xff0c;View&#xff0c;Controller 分离&#xff0c;将 Web 层…
阅读更多...
【果树农药喷洒机器人】Part1：研究现状分析以及技术路线介绍

【果树农药喷洒机器人】Part1：研究现状分析以及技术路线介绍

本专栏介绍&#xff1a;付费专栏&#xff0c;持续更新机器人实战项目&#xff0c;欢迎各位订阅关注。 关注我&#xff0c;带你了解更多关于机器人、嵌入式、人工智能等方面的优质文章&#xff01; 文章目录 一、项目背景二、国内外研究现状2.1 国内研究现状2.2 国外研究现状 三…
阅读更多...
时序预测 | MATLAB实现BO-GRU贝叶斯优化门控循环单元时间序列预测

时序预测 | MATLAB实现BO-GRU贝叶斯优化门控循环单元时间序列预测

时序预测 | MATLAB实现BO-GRU贝叶斯优化门控循环单元时间序列预测 目录 时序预测 | MATLAB实现BO-GRU贝叶斯优化门控循环单元时间序列预测效果一览基本介绍模型搭建程序设计参考资料 效果一览 基本介绍 MATLAB实现BO-GRU贝叶斯优化门控循环单元时间序列预测。基于贝叶斯(bayes)…
阅读更多...
GCC编译过程：预处理-＞编译-＞汇编-＞链接

GCC编译过程：预处理-＞编译-＞汇编-＞链接

目录 引言 概括介绍 一、预处理 二、编译 三、汇编 四、链接 总结 引言 当使用集成开发环境&#xff08;IDE&#xff09;进行C语言编程时&#xff0c;点击"编译"按钮后&#xff0c;整个C程序从源代码到可执行文件的生成过程会自动完成。IDE会在后台为我们执行C…
阅读更多...
使用idea如何生成webservice客户端

使用idea如何生成webservice客户端

需求阐述 在和外围系统对接的时候&#xff0c;对方只给了wsdl地址&#xff0c;记得之前了解到的webservice&#xff0c;可以用idea生成客户端代码。先记录生成的步骤 使用idea如何生成webservice客户端 1.创建一个Java项目 2.第二步生成代码 我的idea再右键要生成文件目录里…
阅读更多...
【数据结构功法】第八话 · 树与二叉树的基本概念

【数据结构功法】第八话 · 树与二叉树的基本概念

目录 &#x1f37a;知识点9&#xff1a;树的概念与性质 &#x1f36f;9.1 树的逻辑结构与性质 &#x1f34a;1.树的逻辑结构 &#x1f34a;2.树的相关术语 &#x1f34a;3.树的性质 &#x1f4dc;习题检测 &#x1f36f;9.2 二叉树的的定义与性质 &#x1f34a;1.二叉树…
阅读更多...
uni——不规则tab切换（skew）

uni——不规则tab切换（skew）

案例展示 案例代码 <!-- 切换栏 --> <view class"tabBoxs"><view class"tabBox"><block v-for"(item,index) in tabList" :key"index"><view class"tabItem":class"current item.id&…
阅读更多...
14.3.6 【Linux】LVM 相关指令汇整与 LVM 的关闭

14.3.6 【Linux】LVM 相关指令汇整与 LVM 的关闭

至于文件系统阶段 &#xff08;filesystem 的格式化处理&#xff09; 部分&#xff0c;还需要以 xfsgrowfs 来修订文件系统实际的大小才行。至于虽然 LVM 可以弹性的管理你的磁盘容量&#xff0c;但是要注意&#xff0c;如果你想要使用 LVM 管理您的硬盘时&#xff0c;那么在安…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023