element中table多选框回显

最新推荐文章于 2025-07-15 09:56:31 发布
原创 最新推荐文章于 2025-07-15 09:56:31 发布 · 1.6w 阅读 · 23 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#element #table   checkbox #vue

本文介绍如何在Element UI的table组件中实现多选框的回显功能，包括设置多选、监听选择事件及前后端数据同步的方法。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

在项目中遇到table表格多选框的问题，结果只知道把选中的值传给后台，却不知道怎么将后台返回的数据回显到表格中，这就尴尬了。看了element文档以及查了一些资料后终于勉强弄出来了，先记录一下。

首先在表格中设置多选
在这里插入图片描述

在data中定义一个空数组接受选中的值 multipleSelection: []

下面就是选择时触发的事件了
在这里插入图片描述

最后在接受到后台返回的数据后去循环表格的值(tableDataB)以及后台返回多选的值(multipleSelection)，找到它们的对应条件就能显示选择的状态了
在这里插入图片描述

最后页面显示效果
在这里插入图片描述

小白一只，可能有些地方不够准确，如果有发现错误的朋友请吱一声哟

ccyzz5
关注
vue3 - element-plus实现将table表格改为单选效果，将el-table表格实现单选，多选表格变为单选形式（Table多选框改成单选框，表格添加单选框，支持复杂表格嵌套数据多层勾选）
高级前端工程师
03-31 6584
vue3，element plus，表格Table，el-table，复选框改为单选，element-ui 表格控件实现单选功能，把多选框调整为只能单选，如何将el-table多选表格变为单选形式，el-table单选，复选框设置为单选,且可通过选择行选中复选框，elementPlus多选表格变单选，表格多选改为单选,且去除表头的多选框，el-table多选框改为单选框，table多选表格如何实现单选，如何修改ui为圆形单选radio，check复选框多选变为单选，二级嵌套表格带下级如何修改为单选表格，选中
vue+element el-table选中状态如何回显
weixin_58658898的博客
08-16 1164
element el-table选中状态长久化保存
element-ui的el-table组件多选回显
m0_55967670的博客
01-26 1866
分页选择回显
el-table中type=“selection“选中数据如何回显
最新发布
Cabriella_的博客
07-15 326
el-table中type="selection"选中数据回显方式
elementui：table多选框的勾选与回显处理
热门推荐
weixin_45031595的博客
12-22 2万+
1、通过@selection-change="handleSelectionChange"获取勾选的数据 2、通过this.$refs.multipleTable.toggleRowSelection(row, true);将数据回显 注意：toggleRowSelection方法的row数据必须是从tableData中获取 <template> <div> <el-table ref="multipleTable" :data="tab
el-table,selection多选通过接口拿到数据后进行反显
柠檬人的博客
09-11 1200
【代码】el-table,selection多选通过接口拿到数据后进行反显。
el-table（type=“selection“）多选框两种回显
qq_50276105的博客
01-06 2万+
2、数据库数据回显，调用this.$refs.multipleTable.toggleRowSelection(row, true)方法的时候，必须实在el-table挂在完成之后才会起作用，因此eement ui的在页面中使用this.$refs.multipleTable.toggleRowSelection(row, true)，是通过添加点击事件来实现的。因此，我称之为页面间数据的回显。被选择的el-table多选框行数据，以此显示在另一张页面上，类似v-model，实时展示。
ElementUi Table复选框回显
韩旭不会敲代码吧的博客
06-03 1000
ElementUi Table复选框回显
table多选框勾选回显
01-03
### 实现 Vue Element Table 组件中多选框勾选状态的回显 为了实现在 `Vue` 的 `Element UI` 表格组件中的多选框勾选状态回显，可以采用以下方法： #### 数据准备与初始化 确保数据源中的每一项都有唯一标识符（如...
记录一下处理element table表格数据多选翻页回显实现
Mr_SnakeZ的博客
04-19 630
table表格多选框回显实现
el-table多选框勾选回显
12-31
### 解决 Element-UI `el-table` 中多选框勾选状态的回显问题 为了实现 `el-table` 的多选框能够正确保存并恢复用户的勾选状态，可以采用如下解决方案： #### 设置表格列属性 定义带有选择功能的表头时，设置 `...
element table 多选与分页回显功能_el-table多选回显，自学编程找工作
2401_83947398的博客
04-15 334
【代码】element table 多选与分页回显功能_el-table多选回显，自学编程找工作。
vue+elementUI el-table多选回显
Kilika的博客
07-25 5415
el-table多选回显
el-table分页多选及回显
四木的博客
05-13 5667
使用element的table组件完成表格的分页多选与数据回显
el-table多选数据回显
蒙蒙细雨的博客
03-30 6718
el-table多选数据回显，每次做老是忘，记录一下，支持切换分页多选功能，以及数据回显 1.重写表格多选与全选（因为表格自带的切换分页会清空） 2.父组件传过来的选中的数据 3.重组一下数据，返回的与采购单位列表字段不一致 4.表格数据回显方法 设置范围弹窗 <template> <div> <!--设置范围--> <el-dialog title="设置范围" :visible.sync="setDialog
Element复选框编辑回显问题
HEWNCP的博客
09-17 2186
由于项目需要，碰到复选框编辑回显问题，因为数据格式与官网格式不同，所以试了许多次未果，百度上的答案也千奇百怪，后来经过公司大佬点拨实现了功能，所以记录一下，希望可以帮助同样遇到坑的朋友。 图中数据为表中点击某一行的传入编辑页中的数据 这是我根据后端返参类型写的假数据 因为element中直接使用字符串与项目数据不同，将数据改为对象回显时走了许多坑 图中ckecks为当前复选框中所有数据，label指向id值，key值为下标 disabled因为我项目中回显后选中不可编辑，如果没用这种效果可不写input框
el-table获取多个表格选中项及数据回显
不定期更新踩坑笔记及学到的知识点
07-08 2276
使用Element UI 中的树形控件和表格组件，实现点击左侧树的不同节点，右侧对应不同表格中，存储记录 不同表格中多选的列表项及已勾选数据的回显
el-table多选checkbox实现可多页多选，翻页后勾选情况不清空
qq_69775429的博客
07-16 660
el-table分页之后，选择中，翻页保留之前选中的数据。1，唯一标识row-key。
element-ui中table多选框回显
laishaojiang的博客
02-26 2559
今天使用到了element-ui中的table组件的多选功能，将选中项的id传给后台，对了下文档很容易就写好了。但是在回显的时候遇到了点麻烦~， 要根据后台返回的id集合，将列表选中。一开始没注意看文档，绕了好久都没想到，后面网上搜索了点资料然后再根据文档，终于弄出来了，原来这么简单。特此记录一下 最主要是table组件的toggleRowSelection方法 ...
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值