Vue3中el-table组件实现分页,多选以及回显
el-table组件实现分页,多选以及回显
- 需求
- 思路
- 1、实现分页多选并保存上一页的选择
- 2、记录当前选择的数据
- 3、默认数据的回显
- 完整代码
需求
- 使用 dialog 显示 table,同时关闭时销毁
- el-table 表格多选
- 回显已选择的表格数据,分页来回切换依然正确显示数据
- 点击取消,数据回到初始化勾选状态
思路
1、实现分页多选并保存上一页的选择
分别添加以下属性
Table 属性
Table-column 属性
<el-table ref="tableRef" row-key="id" @selection-change="handlechange"><el-table-column type="selection" :reserve-selection="true" align="center" />
</el-table>
2、记录当前选择的数据
定义 el-table 的 selection-change 事件回调函数
const handlechange = (val: any[]) => {selected.value = val
}
前两步已经能满足不需要回显的分页多选功能,但是要实现数据的回显还需要以下处理。
3、默认数据的回显
假设定义两个响应式数组表示默认选择和当前选择
// 默认选中列表
const defaultSelected = ref<any[]>([])
// 当前选中的列表
const selected = ref<any[]>([])
// 通过 selection-change 事件回调保存当前选择的数据
const handlechange = (val: any[]) => {selected.value = val
}
在显示弹窗方法里通过 el-table 中的 toggleRowSelection 方法初始化选中所有默认选项(注意是所有的选项,而不只是当前页的选项),如果只选择当前页的默认选项,selected 将会丢失其他默认选项
// 显示表格弹窗
const showDialog = () => {getTableList()setTimeout(() => {for (const item of defaultSelected.value) tableRef.value.toggleRowSelection(item, true) // 选中默认选中的行}, 0)visible.value = true
}
至此实现了所有功能,总结一下原理就是 el-table 通过 row-key 来判断是否已选择,所以通过 toggleRowSelection 选择所有默认的选项,不管点击哪一页都会正确回显数据,并且定义了 handlechange 会保存新的改变
如果每次确认后不销毁 table 组件,需要调用 clearSelection 方法清空所有已选项
const handleClick = () => {// 保存新的数据defaultSelected.value = cloneDeep(selected.value)selected.value.length = 0pagination.currentPage = 1// 清空表格已选项tableRef.value.clearSelection()visible.value = false
}
完整代码
记录下代码,互相学习提提意见
<script setup lang="tsx">
import { useI18n } from '@/hooks/web/useI18n'
import { getTableListApi } from '@/api/table'
import { TableData } from '@/api/table/types'
import { ref, reactive, watch } from 'vue'
import { ElTableColumn, ElTable, ElPagination, ElButton, ElDialog } from 'element-plus'
import { cloneDeep } from 'lodash-es'const { t } = useI18n()const columns: any[] = [{type: 'selection',width: 60,align: 'center'},{field: 'title',label: t('tableDemo.title')},{field: 'author',label: t('tableDemo.author')},{field: 'display_time',label: t('tableDemo.displayTime'),sortable: true},{field: 'importance',label: t('tableDemo.importance')},{field: 'pageviews',label: t('tableDemo.pageviews')}
]const loading = ref(true)const visible = ref(false)const pagination = reactive({currentPage: 1, // 当前页数pageSize: 10, // 每页显示条数pageSizes: [10, 20, 30, 40, 50], // 每页显示个数选择器的选项设置total: 100 // 总条数
})const tableDataList = ref<TableData[]>([])const tableRef = ref<any>()// 默认选中列表
const defaultSelected = ref<any[]>([])// 当前选中的列表
const selected = ref<any[]>([])const getTableList = async () => {// 分页查询方法const res = await getTableListApi({ ...pagination, pageIndex: pagination.currentPage }).catch(() => {}).finally(() => {loading.value = false})if (res) {tableDataList.value = res.data.list}
}const showDialog = () => {getTableList()setTimeout(() => {for (const item of defaultSelected.value) tableRef.value.toggleRowSelection(item, true) // 选中默认选中的行}, 0)visible.value = true
}const handlechange = (val: any) => {selected.value = val
}const handleClick = () => {defaultSelected.value = cloneDeep(selected.value)selected.value.length = 0pagination.currentPage = 1// 清空选项tableRef.value.clearSelection()visible.value = false
}watch(() => [pagination.currentPage, pagination.pageSize], getTableList, { immediate: true })
</script><template><!-- 控制弹窗显示 --><ElButton type="primary" @click="showDialog">显示</ElButton><!-- 表格弹窗 --><el-dialog title="提示" v-model="visible" width="80%" destroyOnClose><div class="w-full h-800px flex flex-col justify-between"><el-tableref="tableRef"height="760px":data="tableDataList":loading="loading"row-key="id"@selection-change="handlechange"><el-table-columnv-for="column in columns":type="column.type":key="column.field":prop="column.field":label="column.label":reserveSelection="true"/></el-table><div class="flex justify-start"><el-button type="primary" @click="handleClick">确认</el-button></div><!-- 分页器 --><div class="flex justify-end"><el-paginationbackgroundlayout="total, sizes, prev, pager, next, jumper"v-model:current-page="pagination.currentPage"v-model:page-size="pagination.pageSize":total="pagination.total":page-sizes="pagination.pageSizes"/></div></div></el-dialog>
</template>
相关文章:

Vue3中el-table组件实现分页,多选以及回显
el-table组件实现分页,多选以及回显 需求思路1、实现分页多选并保存上一页的选择2、记录当前选择的数据3、默认数据的回显 完整代码 需求 使用 dialog 显示 table,同时关闭时销毁el-table 表格多选回显已选择的表格数据,分页来回切换依然正确…...

柯桥韩语学校|韩语每日一词打卡:회갑연[회가변]【名词】花甲宴
今日一词:회갑연 韩语每日一词打卡:회갑연[회가변]【名词】花甲宴 原文:인구 노령화에 따라서 요즘 회갑연보다는 고희연을 더 많이 지냅니다. 意思:随着人口老龄化,最近比起花甲宴,更多人办古稀宴。 【原文分解】 1、인구[인구]…...
python概述
目录 python语言的特点 python语言的优点: python语言的缺点: 1.常用的python编辑器 PyCharm Jupyter Notebook VScode 模块的安装、导入与使用 安装 导入与使用 python语言的特点 1.简洁 2.语法优美 3.简单易学 4.开源:用户可自…...

使用celery+Redis+flask-mail发送邮箱验证码
Celery是一个分布式任务队列,它可以让你异步处理任务,例如发送邮件、图片处理、数据分析等。 在项目中和celery 有关系的文件如下: task.py : 创建celery.py 对象,并且添加任务,和app绑定,注意࿱…...

【第十四章:Sentosa_DSML社区版-机器学习之时间序列】
目录 【第十四章:Sentosa_DSML社区版-机器学习时间序列】 14.1 ARIMAX 14.2 ARIMA 14.3 HoltWinters 14.4 一次指数平滑预测 14.5 二次指数平滑预测 【第十四章:Sentosa_DSML社区版-机器学习时间序列】 14.1 ARIMAX 1.算子介绍 考虑其他序列对一…...

Vue3.X + SpringBoot小程序 | AI大模型项目 | 饮食陪伴官
gitee平台源码 github平台源码 饮食陪伴师是一个管理饮食的原生大模型小程序,优势: 精确营养监控:用户记录饮食后,我们会计算出食用的营养成分与分量,并反馈给用户。饮食建议有效:大模型经过我们训练具备大…...

【C++】检测TCP链接超时——时间轮组件设计
目录 引言 时间轮思想 设计的核心思路 完整代码 组件接口 个人主页:东洛的克莱斯韦克-CSDN博客 引言 对于高并发的服务器来说,链接是一种比较珍贵的资源,对不活跃的链接应该及时释放。判断连接是否活跃的策略是——在给定的时间内&#…...

中国新媒体联盟与中运律师事务所 建立战略合作伙伴关系
2024年9月27日,中国新媒体联盟与中运律师事务所举行战略合作协议签字仪式。中国新媒体联盟主任兼中国社会新闻网主编、中法新闻法制网运营中心主任左新发,中运律师事务所高级顾问刘学伟代表双方单位签字。 中国新媒体联盟是由央视微电影中文频道联合多家…...

【ArcGIS微课1000例】0121:面状数据共享边的修改方法
文章目录 一、共享边概述二、快速的修改办法1. 整形共享边2. 修改边3. 概化边缘一、共享边概述 面状数据共享边指的是两个或多个面状数据(如多边形)共同拥有的边界。在地理信息系统(GIS)、三维建模、大数据分析等领域,面状数据共享边是描述面状空间数据拓扑关系的重要组成…...
图论(dfs系列) 9/27
一、二维网格图中探测环 题意: 给定一个二维数组grid,如果二维数组中存在一个环,处于环上的值都是相同的。返回true;如果不存在就返回false; 思路: 在以往的dfs搜索中,都是往四个方向去dfs;但是在这一道…...
如何在Windows上安装Docker
在 Windows 上使用 Docker 有两种主要方式:通过 Docker Desktop 安装并使用 WSL 2 作为后端,或者直接在 WSL 2 中安装 Docker。这里推荐手残党直接用图形界面安装到WSL 2的后端: 一、启用Hyper-V和容器特性 1. 右键Windows点击应用和功能 …...
golang格式化输入输出
fmt包使用类似于C的printf和scanf的函数实现格式化I/O 1输出格式化 一般的: 动词效果解释%v[1 -23 3]、[1 -23 3]、&{sdlkjf 23}以默认格式显示的值,与bool(%t)、int, int8 etc(%d)、uint, uint8 et…...

Jenkins基于tag的构建
文章目录 Jenkins参数化构建设置设置gitlab tag在工程中维护构建的版本按指定tag的版本启动服务 Jenkins参数化构建设置 选择参数化构建: 在gradle构建之前,增加执行shell的步骤: 把新增的shell框挪到gradle构建之前, 最后保存 …...
性能设计模式
class Singleton { public: static Singleton& getInstance() {static Singleton instance; // 局部静态变量return instance; } private:Singleton() {}Singleton(const Singleton&) delete; // 禁止拷贝Singleton& operator(const Singleton&) delete; // …...

Android 热点分享二维码功能简单介绍
Android 热点分享二维码 文章目录 Android 热点分享二维码一、前言二、热点二维码1、热点分享的字符串2、代码中热点字符串拼接和设置示例3、一个图片示例 三、其他1、Android 热点分享二维码小结2、Android11 设置默认热点名称和热点密码、密码长度 一、前言 比较新的Android…...

SIEM之王,能否克服创新者的窘境?
《网安面试指南》http://mp.weixin.qq.com/s?__bizMzkwNjY1Mzc0Nw&mid2247484339&idx1&sn356300f169de74e7a778b04bfbbbd0ab&chksmc0e47aeff793f3f9a5f7abcfa57695e8944e52bca2de2c7a3eb1aecb3c1e6b9cb6abe509d51f&scene21#wechat_redirect 《Java代码审…...

(JAVA)浅尝关于 “栈” 数据结构
1. 栈的概述: 1.1 生活中的栈 存储货物或供旅客住宿的地方,可引申为仓库、中转站。例如酒店,在古时候叫客栈,是供旅客休息的地方,旅客可以进客栈休息,休息完毕后就离开客栈 1.2计算机中的栈 将生活中的…...
【前端】ES13:ES13新特性
文章目录 1 类新增特性1.1 私有属性和方法1.2 静态成员的私有属性和方法1.3 静态代码块1.4 使用in来判断某个对象是否拥有某个私有属性 2 支持在最外层写await3 at函数来索引元素4 正则匹配的开始和结束索引5 findLast() 和 findLastIndex() 函数6 Error对象的Cause属性 1 类新…...
vuepress 浏览器加载缓存,总是显示旧页面,无法自动刷新数据的解决方法
vuepress 采用多页面形式,每个md文件在打包时,都会被转为一个html页面;而浏览器默认会缓存页面,导致更新的页面必须手动刷新才行 对于更新较为频繁的文档 全局可在config.js里设置 参考文档: https://vuepress.github.io/zh/ref…...

如何使用代理IP解决反爬虫问题
在网络爬虫的世界里,反爬虫机制就像是守卫城池的士兵,时刻准备着抵御外来的“入侵者”。为了突破这些守卫,代理IP就像是你的隐形斗篷,帮助你在网络世界中自由穿梭。今天,我们就来聊聊如何使用代理IP解决反爬虫问题。 …...
Java 语言特性(面试系列1)
一、面向对象编程 1. 封装(Encapsulation) 定义:将数据(属性)和操作数据的方法绑定在一起,通过访问控制符(private、protected、public)隐藏内部实现细节。示例: public …...

大型活动交通拥堵治理的视觉算法应用
大型活动下智慧交通的视觉分析应用 一、背景与挑战 大型活动(如演唱会、马拉松赛事、高考中考等)期间,城市交通面临瞬时人流车流激增、传统摄像头模糊、交通拥堵识别滞后等问题。以演唱会为例,暖城商圈曾因观众集中离场导致周边…...

论文浅尝 | 基于判别指令微调生成式大语言模型的知识图谱补全方法(ISWC2024)
笔记整理:刘治强,浙江大学硕士生,研究方向为知识图谱表示学习,大语言模型 论文链接:http://arxiv.org/abs/2407.16127 发表会议:ISWC 2024 1. 动机 传统的知识图谱补全(KGC)模型通过…...

C# 求圆面积的程序(Program to find area of a circle)
给定半径r,求圆的面积。圆的面积应精确到小数点后5位。 例子: 输入:r 5 输出:78.53982 解释:由于面积 PI * r * r 3.14159265358979323846 * 5 * 5 78.53982,因为我们只保留小数点后 5 位数字。 输…...

排序算法总结(C++)
目录 一、稳定性二、排序算法选择、冒泡、插入排序归并排序随机快速排序堆排序基数排序计数排序 三、总结 一、稳定性 排序算法的稳定性是指:同样大小的样本 **(同样大小的数据)**在排序之后不会改变原始的相对次序。 稳定性对基础类型对象…...
作为测试我们应该关注redis哪些方面
1、功能测试 数据结构操作:验证字符串、列表、哈希、集合和有序的基本操作是否正确 持久化:测试aof和aof持久化机制,确保数据在开启后正确恢复。 事务:检查事务的原子性和回滚机制。 发布订阅:确保消息正确传递。 2、性…...
Kubernetes 网络模型深度解析:Pod IP 与 Service 的负载均衡机制,Service到底是什么?
Pod IP 的本质与特性 Pod IP 的定位 纯端点地址:Pod IP 是分配给 Pod 网络命名空间的真实 IP 地址(如 10.244.1.2)无特殊名称:在 Kubernetes 中,它通常被称为 “Pod IP” 或 “容器 IP”生命周期:与 Pod …...
Linux安全加固:从攻防视角构建系统免疫
Linux安全加固:从攻防视角构建系统免疫 构建坚不可摧的数字堡垒 引言:攻防对抗的新纪元 在日益复杂的网络威胁环境中,Linux系统安全已从被动防御转向主动免疫。2023年全球网络安全报告显示,高级持续性威胁(APT)攻击同比增长65%,平均入侵停留时间缩短至48小时。本章将从…...
Java多线程实现之Runnable接口深度解析
Java多线程实现之Runnable接口深度解析 一、Runnable接口概述1.1 接口定义1.2 与Thread类的关系1.3 使用Runnable接口的优势 二、Runnable接口的基本实现方式2.1 传统方式实现Runnable接口2.2 使用匿名内部类实现Runnable接口2.3 使用Lambda表达式实现Runnable接口 三、Runnabl…...

表单设计器拖拽对象时添加属性
背景:因为项目需要。自写设计器。遇到的坑在此记录 使用的拖拽组件时vuedraggable。下面放上局部示例截图。 坑1。draggable标签在拖拽时可以获取到被拖拽的对象属性定义 要使用 :clone, 而不是clone。我想应该是因为draggable标签比较特。另外在使用**:clone时要将…...