Element UI 实战：跨页保存表格选中状态与判断状态可选性的高效方案

2023-12-01 14:30
文章标签 实战 高效 保存 ui 判断 表格 状态 方案 选中 element 跨页 可选性

本文主要是介绍Element UI 实战：跨页保存表格选中状态与判断状态可选性的高效方案，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

引言

        在前文中，我们曾深入探讨了在修改数据后跨页时提醒用户可能丢失数据的问题。虽然这种方式对于一些场景是足够的，但当涉及选择框时，我们需要更为智能和高效的解决方案。在本文中，我们将分享一种基于 Element UI 的实际案例，旨在实现跨页保存选中项与禁选特定项的需求。通过以下详细讨论，你将了解到这一方案的实现原理及其用户体验效果。

问题背景

        在许多 Web 应用中，数据分页是常见的操作方式。当用户在一个页面中选择了一些数据项，然后切换到另一页时，保持之前选中的项通常是用户友好的体验。同时，可能存在一些需要禁选的执行项，例如在某些状态下，用户不应该选择或执行某些操作：如当数据可以进行执行相关操作，并且需要消耗一定时间时，我们为了任务的完整执行，会在任务执行期间，禁止选中该任务的选择框（可以预防用户进行删除等操作），后续执行完毕可以恢复初始选中状态，也可以放弃选中状态。

方案设计与实现

        在 Element UI 中，表格（Table）组件提供了丰富的特性和事件。可以利用这些特性和事件来实现跨页保存选中项和禁选执行项的需求。

实现

        1.跨页保存

        在许多 Web 应用中，数据分页是常见的操作方式。当用户在一个页面中选择了一些数据项，然后切换到另一页时，保持之前选中的项通常是用户友好的体验。

        模板
    <el-tableref="multipleTable":data="tableData"@select="handleSelectionChange"@select-all="handleSelectionAll"><el-table-column type="selection" align="center"></el-table-column><el-table-column prop="name" label="name" align="center"></el-table-column><el-table-column prop="age" label="age" align="center"></el-table-column></el-table><el-pagination:background="true":current-page.sync="queryParams.page":page-size.sync="queryParams.pageSize"layout="total,prev,pager,next,sizes":total="total":page-sizes="[5, 10, 20, 40]"@size-change="getList"@current-change="getList" />
        脚本
data() {return {total: void 0,queryParams: {page: 1,pageSize: 10,},allData: [],tableData: [],multipleSelection: [],listId: [],};},mounted() {this.getList();},methods: {getList() {this.allData = [{ name: 'A', age: 1 },{ name: 'B', age: 2 },{ name: 'C', age: 3 },{ name: 'D', age: 4 },{ name: 'E', age: 5 },{ name: 'F', age: 6 },{ name: 'G', age: 7 },{ name: 'H', age: 8 },{ name: 'I', age: 9 },{ name: 'J', age: 10 },{ name: 'K', age: 11 },{ name: 'L', age: 12 },{ name: 'M', age: 13 },{ name: 'N', age: 14 },{ name: 'O', age: 15 },{ name: 'P', age: 16 },{ name: 'Q', age: 17 },{ name: 'R', age: 18 },{ name: 'S', age: 19 },{ name: 'T', age: 20 },{ name: 'U', age: 21 },{ name: 'V', age: 22 },{ name: 'W', age: 23 },{ name: 'X', age: 24 },{ name: 'Y', age: 25 },{ name: 'Z', age: 26 },];this.total = this.allData.length;let currentPageIndex = (this.queryParams.page - 1) * this.queryParams.pageSize;let currentPageSize = this.queryParams.pageSize - 1 || 1;this.tableData = this.allData.slice(currentPageIndex, currentPageIndex + currentPageSize + 1);this.listId = [];this.tableData.forEach(item => this.listId.push(item.name));this.$nextTick(() => {this.tableData.forEach((item, index) => {if (this.multipleSelection.findIndex(v => v == item.name) >= 0) {this.$refs.multipleTable.toggleRowSelection(this.$refs.multipleTable.data[index], true);}});});},// 全选handleSelectionAll(val) {if (val.length) {const result = [];this.listId.forEach(id => {if (this.multipleSelection.every(item => item !== id)) result.push(id);});this.multipleSelection.push(...result);} else {this.listId.forEach(id => {this.multipleSelection = this.multipleSelection.filter(item => item !== id);});}},// 单选handleSelectionChange(rows, row) {if (this.multipleSelection.find(item => item === row.name)) this.multipleSelection = this.multipleSelection.filter(item => item != row.name); // 过滤(删除)else this.multipleSelection.push(row.name);},
}
        解析

  1. getList 方法：

    • 发送 HTTP GET 请求，获取数据(/.../是请求的地址，queryParams是请求参数)。
    • 在请求成功的回调中，判断返回数据的状态是否为200，如果是，将返回的数据赋值给 tableData。
    • 构建 listId 数组，存储 tableData 中每一项的 id。
    • 利用 $nextTick，确保在 Vue 更新 DOM 后执行，遍历 tableData，对于已经在 multipleSelection 中的项，在表格中选中对应的行。

  2. handleSelectionAll 方法：

    • 接受一个参数 val，即当前页选中的所有行数据。
    • 如果 val.length 大于 0，表示当前页有选中的行，遍历 listId，将不在 multipleSelection 中的项添加到 multipleSelection 中。
    • 如果 val.length 为 0，表示当前页没有选中的行，遍历 listId，将在 multipleSelection 中的项从中移除。

  3. handleSelectionChange 方法：

    • 接受两个参数，rows 是当前页选中的所有行数据，row 是当前操作的行数据。
    • 如果 multipleSelection 中已经存在 row.id，则将其从 multipleSelection 中移除，否则将其添加到 multipleSelection 中。

        这些方法共同实现了跨页保存选中状态的功能，通过维护 multipleSelection 数组来保存用户选择的行的 id，从而在表格分页切换时保持选中状态。

        2.禁选执行项

        数据拥有执行状态之类的字段，并且需要消耗一定时间时，我们为了任务的完整执行，会在任务执行期间，禁止选中该任务的选择框（以避免删除等操作）。执行完毕后可以恢复初始选中状态，也可以放弃选中状态。

         以下代码选择的是后者，即在重新开始运行时，禁用该项选择框并且执行完毕后不重新选中。如果希望保留，在对应执行的函数（下述为 reloadTask）中不删除 multipleSelection 中对应的id即可。

        模板
    <el-tableref="multipleTable":data="tableData"@select="handleSelectionChange"@select-all="handleSelectionAll"><el-table-column type="selection" align="center" :selectable="selectable"></el-table-column><el-table-column prop="name" label="name" align="center"></el-table-column><el-table-column prop="age" label="age" align="center"></el-table-column><el-table-column label="status"><template slot-scope="scope"><spanstyle="margin-right:10px; cursor: pointer;":class="scope.row.status !== '执行中' ? 'el-icon-caret-right' : 'el-icon-loading'"size="small":disabled="scope.row.status === '执行中'"@click="reloadTask(scope.row)"></span><el-tag :type="scope.row.status !== '执行中' ? '' : 'info'">{{scope.row.status}}</el-tag></template></el-table-column></el-table><el-pagination:background="true":current-page.sync="queryParams.page":page-size.sync="queryParams.pageSize"layout="total,prev,pager,next,sizes":total="total":page-sizes="[5, 10, 20, 40]"@size-change="getList"@current-change="getList" />
        脚本
data() {return {total: void 0,queryParams: {page: 1,pageSize: 10,},allData: [],tableData: [],multipleSelection: [],listId: [],loadingSelection: new Set(),};},mounted() {this.getList();},methods: {getList(flag = false) {if (!flag) {this.allData = [{ name: 'A', age: 1, status: '执行完毕' },{ name: 'B', age: 2, status: '执行中' },{ name: 'C', age: 3, status: '执行完毕' },{ name: 'D', age: 4, status: '未执行' },{ name: 'E', age: 5, status: '未执行' },{ name: 'F', age: 6, status: '执行中' },{ name: 'G', age: 7, status: '执行中' },{ name: 'H', age: 8, status: '执行中' },{ name: 'I', age: 9, status: '执行中' },{ name: 'J', age: 10, status: '未执行' },{ name: 'K', age: 11, status: '未执行' },{ name: 'L', age: 12, status: '未执行' },{ name: 'M', age: 13, status: '未执行' },{ name: 'N', age: 14, status: '未执行' },{ name: 'O', age: 15, status: '未执行' },{ name: 'P', age: 16, status: '未执行' },{ name: 'Q', age: 17, status: '未执行' },{ name: 'R', age: 18, status: '未执行' },{ name: 'S', age: 19, status: '未执行' },{ name: 'T', age: 20, status: '未执行' },{ name: 'U', age: 21, status: '未执行' },{ name: 'V', age: 22, status: '未执行' },{ name: 'W', age: 23, status: '未执行' },{ name: 'X', age: 24, status: '未执行' },{ name: 'Y', age: 25, status: '未执行' },{ name: 'Z', age: 26, status: '未执行' },];}this.total = this.allData.length;let currentPageIndex = (this.queryParams.page - 1) * this.queryParams.pageSize;let currentPageSize = this.queryParams.pageSize - 1 || 1;this.tableData = this.allData.slice(currentPageIndex, currentPageIndex + currentPageSize + 1);this.listId = [];this.tableData.forEach(item => this.listId.push(item.name));this.$nextTick(() => {this.tableData.forEach((item, index) => {if (this.multipleSelection.findIndex(v => v == item.name) >= 0) {this.$refs.multipleTable.toggleRowSelection(this.$refs.multipleTable.data[index], true);}});});},// 执行任务reloadTask(row) {this.multipleSelection = this.multipleSelection.filter(item => item !== row.name);row.status = '执行中';this.getList(true);},// 判断可选性selectable(row) {if (row.status !== '执行中') {if (this.loadingSelection.has(row.name)) this.loadingSelection.delete(row.name);return true;} else {this.loadingSelection.add(row.name);return false;}},// 全选handleSelectionAll(val) {if (val.length) {const result = [];this.listId.forEach(id => {if (this.multipleSelection.every(item => item !== id) && !this.loadingSelection.has(id)) result.push(id);});this.multipleSelection.push(...result);} else {this.listId.forEach(id => {this.multipleSelection = this.multipleSelection.filter(item => item !== id);});}},// 单选handleSelectionChange(rows, row) {if (this.multipleSelection.find(item => item === row.name)) this.multipleSelection = this.multipleSelection.filter(item => item != row.name); // 过滤(删除)else this.multipleSelection.push(row.name);},},
         解析

        这部分代码经过修改后主要涉及到对行的可选性（selectable 方法）以及全选处理（handleSelectionAll 方法）。下面是对修改部分代码的详细解释：

  1. selectable 方法：

    • selectable 方法用于确定给定行 row 是否可选。如果行的状态 status 不是 '执行中'，则认为该行可选。
    • 如果行不可选，而且 loadingSelection 集合中已经存在该行的 id，则将其从 loadingSelection 中删除，表示加载完成。
    • 如果行可选，将其 id 添加到 loadingSelection 集合中，表示正在加载中，并返回 false 表示不可选；否则，返回 true 表示可选。

  2. handleSelectionAll 方法：

    • 该方法用于处理全选操作。接收参数 val，即当前页选中的所有行数据。
    • 如果有选中的行，遍历 listId，将不在 multipleSelection 中且不在 loadingSelection 中的项添加到 multipleSelection 中。
    • 如果没有选中的行，遍历 listId，将在 multipleSelection 中的项从中移除。

        这些修改主要增加了对行的可选性的判断，以及对加载状态的管理，通过 loadingSelection 集合来标记哪些行正在加载中。这样可以更好地控制在某些条件下禁止选择或在加载中时保持选择状态。

实现效果

跨页保存

禁选某些状态

这篇关于Element UI 实战：跨页保存表格选中状态与判断状态可选性的高效方案的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/441521。

相关文章

网页解析 lxml 库--实战

网页解析 lxml 库--实战

lxml库使用流程 lxml 是 Python 的第三方解析库，完全使用 Python 语言编写，它对 XPath表达式提供了良好的支 持，因此能够了高效地解析 HTML/XML 文档。本节讲解如何通过 lxml 库解析 HTML 文档。 pip install lxml lxm| 库提供了一个 etree 模块，该模块专门用来解析 HTML/XML 文档，下面来介绍一下 lxml 库
阅读更多...
HarmonyOS学习(七)——UI（五）常用布局总结

HarmonyOS学习(七)——UI（五）常用布局总结

自适应布局 1.1、线性布局（LinearLayout） 通过线性容器Row和Column实现线性布局。Column容器内的子组件按照垂直方向排列，Row组件中的子组件按照水平方向排列。 属性说明space通过space参数设置主轴上子组件的间距，达到各子组件在排列上的等间距效果alignItems设置子组件在交叉轴上的对齐方式，且在各类尺寸屏幕上表现一致，其中交叉轴为垂直时，取值为Vert
阅读更多...
无人叉车3d激光slam多房间建图定位异常处理方案-墙体画线地图切分方案

无人叉车3d激光slam多房间建图定位异常处理方案-墙体画线地图切分方案

墙体画线地图切分方案 针对问题：墙体两侧特征混淆误匹配，导致建图和定位偏差，表现为过门跳变、外月台走歪等 ·解决思路：预期的根治方案IGICP需要较长时间完成上线，先使用切分地图的工程化方案，即墙体两侧切分为不同地图，在某一侧只使用该侧地图进行定位 方案思路 切分原理：切分地图基于关键帧位置，而非点云。 理论基础：光照是直线的，一帧点云必定只能照射到墙的一侧，无法同时照到两侧实践考虑：关
阅读更多...
hdu1043（八数码问题，广搜 + hash（实现状态压缩） ）

hdu1043（八数码问题，广搜 + hash（实现状态压缩） ）

利用康拓展开将一个排列映射成一个自然数，然后就变成了普通的广搜题。 #include<iostream>#include<algorithm>#include<string>#include<stack>#include<queue>#include<map>#include<stdio.h>#include<stdlib.h>#include<ctype.h>#inclu
阅读更多...
性能分析之MySQL索引实战案例

性能分析之MySQL索引实战案例

文章目录 一、前言二、准备三、MySQL索引优化四、MySQL 索引知识回顾五、总结 一、前言 在上一讲性能工具之 JProfiler 简单登录案例分析实战中已经发现SQL没有建立索引问题，本文将一起从代码层去分析为什么没有建立索引？ 开源ERP项目地址：https://gitee.com/jishenghua/JSH_ERP 二、准备 打开IDEA找到登录请求资源路径位置
阅读更多...
高效+灵活，万博智云全球发布AWS无代理跨云容灾方案！

高效+灵活，万博智云全球发布AWS无代理跨云容灾方案！

摘要 近日，万博智云推出了基于AWS的无代理跨云容灾解决方案，并与拉丁美洲，中东，亚洲的合作伙伴面向全球开展了联合发布。这一方案以AWS应用环境为基础，将HyperBDR平台的高效、灵活和成本效益优势与无代理功能相结合，为全球企业带来实现了更便捷、经济的数据保护。 一、全球联合发布 9月2日，万博智云CEO Michael Wong在线上平台发布AWS无代理跨云容灾解决方案的阐述视频，介绍了
阅读更多...
hdu1565（状态压缩）

hdu1565（状态压缩）

本人第一道ac的状态压缩dp，这题的数据非常水，很容易过 题意：在n*n的矩阵中选数字使得不存在任意两个数字相邻，求最大值 解题思路： 一、因为在1<<20中有很多状态是无效的，所以第一步是选择有效状态，存到cnt[]数组中 二、dp[i][j]表示到第i行的状态cnt[j]所能得到的最大值，状态转移方程dp[i][j] = max(dp[i][j],dp[i-1][k]) ,其中k满足c
阅读更多...
嵌入式QT开发：构建高效智能的嵌入式系统

嵌入式QT开发：构建高效智能的嵌入式系统

摘要： 本文深入探讨了嵌入式 QT 相关的各个方面。从 QT 框架的基础架构和核心概念出发，详细阐述了其在嵌入式环境中的优势与特点。文中分析了嵌入式 QT 的开发环境搭建过程，包括交叉编译工具链的配置等关键步骤。进一步探讨了嵌入式 QT 的界面设计与开发，涵盖了从基本控件的使用到复杂界面布局的构建。同时也深入研究了信号与槽机制在嵌入式系统中的应用，以及嵌入式 QT 与硬件设备的交互，包括输入输出设
阅读更多...
高效录音转文字：2024年四大工具精选！

高效录音转文字：2024年四大工具精选！

在快节奏的工作生活中，能够快速将录音转换成文字是一项非常实用的能力。特别是在需要记录会议纪要、讲座内容或者是采访素材的时候，一款优秀的在线录音转文字工具能派上大用场。以下推荐几个好用的录音转文字工具！ 365在线转文字 直达链接：https://www.pdf365.cn/ 365在线转文字是一款提供在线录音转文字服务的工具，它以其高效、便捷的特点受到用户的青睐。用户无需下载安装任何软件，只
阅读更多...
C#实战|大乐透选号器[6]：实现实时显示已选择的红蓝球数量

C#实战|大乐透选号器[6]：实现实时显示已选择的红蓝球数量

哈喽，你好啊，我是雷工。 关于大乐透选号器在前面已经记录了5篇笔记，这是第6篇； 接下来实现实时显示当前选中红球数量，蓝球数量； 以下为练习笔记。 01 效果演示 当选择和取消选择红球或蓝球时，在对应的位置显示实时已选择的红球、蓝球的数量； 02 标签名称 分别设置Label标签名称为：lblRedCount、lblBlueCount
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2