当前位置: 首页 > news >正文

Vue3中el-table组件实现分页,多选以及回显

el-table组件实现分页,多选以及回显

    • 需求
    • 思路
      • 1、实现分页多选并保存上一页的选择
      • 2、记录当前选择的数据
      • 3、默认数据的回显
    • 完整代码

需求

  1. 使用 dialog 显示 table,同时关闭时销毁
  2. el-table 表格多选
  3. 回显已选择的表格数据,分页来回切换依然正确显示数据
  4. 点击取消,数据回到初始化勾选状态

思路

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

柯桥韩语学校|韩语每日一词打卡:회갑연[회가변]【名词】花甲宴

今日一词:회갑연 韩语每日一词打卡&#xff1a;회갑연[회가변]【名词】花甲宴 原文:인구 노령화에 따라서 요즘 회갑연보다는 고희연을 더 많이 지냅니다. 意思&#xff1a;随着人口老龄化&#xff0c;最近比起花甲宴&#xff0c;更多人办古稀宴。 【原文分解】 1、인구[인구]…...

python概述

目录 python语言的特点 python语言的优点&#xff1a; python语言的缺点&#xff1a; 1.常用的python编辑器 PyCharm Jupyter Notebook VScode 模块的安装、导入与使用 安装 导入与使用 python语言的特点 1.简洁 2.语法优美 3.简单易学 4.开源&#xff1a;用户可自…...

使用celery+Redis+flask-mail发送邮箱验证码

Celery是一个分布式任务队列&#xff0c;它可以让你异步处理任务&#xff0c;例如发送邮件、图片处理、数据分析等。 在项目中和celery 有关系的文件如下&#xff1a; task.py : 创建celery.py 对象&#xff0c;并且添加任务&#xff0c;和app绑定&#xff0c;注意&#xff1…...

【第十四章:Sentosa_DSML社区版-机器学习之时间序列】

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

Vue3.X + SpringBoot小程序 | AI大模型项目 | 饮食陪伴官

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

【C++】检测TCP链接超时——时间轮组件设计

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

中国新媒体联盟与中运律师事务所 建立战略合作伙伴关系

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

【ArcGIS微课1000例】0121:面状数据共享边的修改方法

文章目录 一、共享边概述二、快速的修改办法1. 整形共享边2. 修改边3. 概化边缘一、共享边概述 面状数据共享边指的是两个或多个面状数据(如多边形)共同拥有的边界。在地理信息系统(GIS)、三维建模、大数据分析等领域,面状数据共享边是描述面状空间数据拓扑关系的重要组成…...

图论(dfs系列) 9/27

一、二维网格图中探测环 题意: 给定一个二维数组grid,如果二维数组中存在一个环&#xff0c;处于环上的值都是相同的。返回true&#xff1b;如果不存在就返回false&#xff1b; 思路&#xff1a; 在以往的dfs搜索中&#xff0c;都是往四个方向去dfs&#xff1b;但是在这一道…...

如何在Windows上安装Docker

在 Windows 上使用 Docker 有两种主要方式&#xff1a;通过 Docker Desktop 安装并使用 WSL 2 作为后端&#xff0c;或者直接在 WSL 2 中安装 Docker。这里推荐手残党直接用图形界面安装到WSL 2的后端&#xff1a; 一、启用Hyper-V和容器特性 1. 右键Windows点击应用和功能 …...

golang格式化输入输出

fmt包使用类似于C的printf和scanf的函数实现格式化I/O 1输出格式化 一般的&#xff1a; 动词效果解释%v[1 -23 3]、[1 -23 3]、&{sdlkjf 23}以默认格式显示的值&#xff0c;与bool&#xff08;%t&#xff09;、int, int8 etc&#xff08;%d&#xff09;、uint, uint8 et…...

Jenkins基于tag的构建

文章目录 Jenkins参数化构建设置设置gitlab tag在工程中维护构建的版本按指定tag的版本启动服务 Jenkins参数化构建设置 选择参数化构建&#xff1a; 在gradle构建之前&#xff0c;增加执行shell的步骤&#xff1a; 把新增的shell框挪到gradle构建之前&#xff0c; 最后保存 …...

性能设计模式

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. 栈的概述&#xff1a; 1.1 生活中的栈 存储货物或供旅客住宿的地方&#xff0c;可引申为仓库、中转站。例如酒店&#xff0c;在古时候叫客栈&#xff0c;是供旅客休息的地方&#xff0c;旅客可以进客栈休息&#xff0c;休息完毕后就离开客栈 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 采用多页面形式&#xff0c;每个md文件在打包时&#xff0c;都会被转为一个html页面&#xff1b;而浏览器默认会缓存页面&#xff0c;导致更新的页面必须手动刷新才行 对于更新较为频繁的文档 全局可在config.js里设置 参考文档: https://vuepress.github.io/zh/ref…...

如何使用代理IP解决反爬虫问题

在网络爬虫的世界里&#xff0c;反爬虫机制就像是守卫城池的士兵&#xff0c;时刻准备着抵御外来的“入侵者”。为了突破这些守卫&#xff0c;代理IP就像是你的隐形斗篷&#xff0c;帮助你在网络世界中自由穿梭。今天&#xff0c;我们就来聊聊如何使用代理IP解决反爬虫问题。 …...

KubeSphere 容器平台高可用:环境搭建与可视化操作指南

Linux_k8s篇 欢迎来到Linux的世界&#xff0c;看笔记好好学多敲多打&#xff0c;每个人都是大神&#xff01; 题目&#xff1a;KubeSphere 容器平台高可用&#xff1a;环境搭建与可视化操作指南 版本号: 1.0,0 作者: 老王要学习 日期: 2025.06.05 适用环境: Ubuntu22 文档说…...

UE5 学习系列(二)用户操作界面及介绍

这篇博客是 UE5 学习系列博客的第二篇&#xff0c;在第一篇的基础上展开这篇内容。博客参考的 B 站视频资料和第一篇的链接如下&#xff1a; 【Note】&#xff1a;如果你已经完成安装等操作&#xff0c;可以只执行第一篇博客中 2. 新建一个空白游戏项目 章节操作&#xff0c;重…...

地震勘探——干扰波识别、井中地震时距曲线特点

目录 干扰波识别反射波地震勘探的干扰波 井中地震时距曲线特点 干扰波识别 有效波&#xff1a;可以用来解决所提出的地质任务的波&#xff1b;干扰波&#xff1a;所有妨碍辨认、追踪有效波的其他波。 地震勘探中&#xff0c;有效波和干扰波是相对的。例如&#xff0c;在反射波…...

脑机新手指南(八):OpenBCI_GUI:从环境搭建到数据可视化(下)

一、数据处理与分析实战 &#xff08;一&#xff09;实时滤波与参数调整 基础滤波操作 60Hz 工频滤波&#xff1a;勾选界面右侧 “60Hz” 复选框&#xff0c;可有效抑制电网干扰&#xff08;适用于北美地区&#xff0c;欧洲用户可调整为 50Hz&#xff09;。 平滑处理&…...

C++:std::is_convertible

C++标志库中提供is_convertible,可以测试一种类型是否可以转换为另一只类型: template <class From, class To> struct is_convertible; 使用举例: #include <iostream> #include <string>using namespace std;struct A { }; struct B : A { };int main…...

Spring Boot 实现流式响应(兼容 2.7.x)

在实际开发中&#xff0c;我们可能会遇到一些流式数据处理的场景&#xff0c;比如接收来自上游接口的 Server-Sent Events&#xff08;SSE&#xff09; 或 流式 JSON 内容&#xff0c;并将其原样中转给前端页面或客户端。这种情况下&#xff0c;传统的 RestTemplate 缓存机制会…...

蓝桥杯 2024 15届国赛 A组 儿童节快乐

P10576 [蓝桥杯 2024 国 A] 儿童节快乐 题目描述 五彩斑斓的气球在蓝天下悠然飘荡&#xff0c;轻快的音乐在耳边持续回荡&#xff0c;小朋友们手牵着手一同畅快欢笑。在这样一片安乐祥和的氛围下&#xff0c;六一来了。 今天是六一儿童节&#xff0c;小蓝老师为了让大家在节…...

Qwen3-Embedding-0.6B深度解析:多语言语义检索的轻量级利器

第一章 引言&#xff1a;语义表示的新时代挑战与Qwen3的破局之路 1.1 文本嵌入的核心价值与技术演进 在人工智能领域&#xff0c;文本嵌入技术如同连接自然语言与机器理解的“神经突触”——它将人类语言转化为计算机可计算的语义向量&#xff0c;支撑着搜索引擎、推荐系统、…...

JavaScript基础-API 和 Web API

在学习JavaScript的过程中&#xff0c;理解API&#xff08;应用程序接口&#xff09;和Web API的概念及其应用是非常重要的。这些工具极大地扩展了JavaScript的功能&#xff0c;使得开发者能够创建出功能丰富、交互性强的Web应用程序。本文将深入探讨JavaScript中的API与Web AP…...

并发编程 - go版

1.并发编程基础概念 进程和线程 A. 进程是程序在操作系统中的一次执行过程&#xff0c;系统进行资源分配和调度的一个独立单位。B. 线程是进程的一个执行实体,是CPU调度和分派的基本单位,它是比进程更小的能独立运行的基本单位。C.一个进程可以创建和撤销多个线程;同一个进程中…...