elementUI中el-table多选表格数据删除后，再次删除时复选框依旧是选中状态

最新推荐文章于 2025-10-17 18:03:10 发布
原创 最新推荐文章于 2025-10-17 18:03:10 发布 · 3.9k 阅读 · 6 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#elementui #vue #vue.js

当使用ElementUI的el-table组件并进行数据删除时，遇到一个问题：删除后的表格在重新加载时，之前被选中的复选框依然保持选中状态。经过排查发现，即使删除了选中数据，界面显示仍有误。为解决这个问题，需要在清空数据后调用ElementUI的clearSelection()方法，以确保选中状态正确重置。

1.点击删除后数据为空
在这里插入图片描述
在这里插入图片描述
2.再次搜索单号一进界面就保持了已选状态，我检查了删除的选中的数据为空，所以唯一的情况是界面显示不正常
在这里插入图片描述
3.于是查了文档得出在清空之后所选数据之后要另外添加一句。dataTable是table用ref添加的名字。clearSelection()是elementUI内部的方法。

 this.$refs.dataTable.clearSelection(); //清除之前的选中状态
最低0.47元/天 解锁文章
vue3 - element-plus实现将table表格改为单选效果，将el-table表格实现单选，多选表格变为单选形式（Table多选框改成单选框，表格添加单选框，支持复杂表格嵌套数据多层勾选）
高级前端工程师
03-31 6987
vue3，element plus，表格Table，el-table，复选框改为单选，element-ui 表格控件实现单选功能，把多选框调整为只能单选，如何将el-table多选表格变为单选形式，el-table单选，复选框设置为单选,且可通过选择行选中复选框，elementPlus多选表格变单选，表格多选改为单选,且去除表头的多选框，el-table多选框改为单选框，table多选表格如何实现单选，如何修改ui为圆形单选radio，check复选框多选变为单选，二级嵌套表格带下级如何修改为单选表格，选中
Ant Design Vue - 手动清空表格复选框勾选状态（复选框打勾残留）
🏆 前端领域优质创作者
12-24 1万+
ant design vue table清空选中，antd vue表格组件添加复选功能 残留问题，表格批量删除后选中框残留问题，ant中table表格的多选框如何清空，ant design table 复选框，操作之后有残留，解决antd-vue表格批量操作选中框仍残留的问题，当我们批量删除数据后，表格的数据内容更新了，但是每行前面的选中框还是选中的状态，有残留，
解决：el-table操作完之后，复选框还是选中状态
weixin_50261167的博客
05-25 2011
解决table操作完之后，复选框还是选中状态
Element Plus el-table 默认勾选行的方法
最新发布
xvmingjiang的博客
10-17 505
【代码】Element Plus el-table 默认勾选行的方法。
element-UI中解决ele-table多选表格数据删除后，复选框依旧存在的问题
qq_46399965的博客
06-29 2019
第一步：在el-table标签里面加上自定义的ref，我这里自定义的是。第二步：找到你的删除方法，在删除成功后面加上。目的是清除复选框内容。
elementUI-plus虚拟表el-table-v2 checkbox删除后，下一个复选框又被选中且无法删除
黎小小的博客
02-16 1636
和vue 的 :key一个原理，必须设置循环数据的唯一值，才能在操作时定位到唯一数据。其他bug就是编码问题了。
el-table清除操作，列表多选切换页面还保留上次选中信息
Giraffe0615的博客
08-05 787
el-table清除操作，列表多选切换页面还保留上次选中信息
Vue3 使用ElementPlus表格组件时，删除多个选中项时会导致未选中项进行选中且无法删除
qq_52570860的博客
02-19 310
在 <el-table>标签中添加 row-key 属性保证表格中每一行的唯一性即可正确删除
vue2 - elementUI表格table树形结构复选框勾选父子联动示例，el-table树状表格tree复选框checkbox多选框全选/反选取消children（当子级全选中，父级自动勾选）
高级前端工程师
12-15 1万+
vue2，elementui，el-table树状表格多选，树形结构结合多选框使用，实现单选父子联动全选反选，勾选联动父级勾选，表格多选check父子联动，table表格children如何嵌入复选框，el-table使用多选框与树形数据写一个有半选全选功能的表格，el-table树形表格实现复选框多选效果，表格树状结构多选，每一个row都可以选中并且联动全选按钮，table选父带子选子带父，树形数据与懒加载，Table表格树形结构多选框选中父级时会选中子级，elementUI表格里树形结构嵌套复选框全选全
vue3 - elementPlus表格table树形结构复选框勾选父子联动示例，el-table树状表格tree复选框checkbox多选框全选/反选取消，children当子级全选中，父级自动勾选
热门推荐
高级前端工程师
12-15 1万+
vue3，Element Plus，el-table树状表格多选，表格树状结构多选，每一个row都可以选中并且联动全选按钮，table选父带子选子带父，树形数据与懒加载，Table表格树形结构多选框选中父级时会选中子级，表格checkbox复选框的全选反选，树形结构结合多选框使用，实现单选父子联动全选反选，勾选联动父级勾选，表格多选check父子联动，table表格children如何嵌入复选框，el-table使用多选框与树形数据写一个有半选全选功能的表格，el-table树形表格实现复选框多选效果，有分
element el-table表格切换分页保留分页数据+限制多选数量
红烧咸咸鱼
07-01 606
element el-table表格切换分页保留分页数据+限制多选数量
element的el-table组件实现分页复选功能及解决批量删除后仍会选中已删除的值问题
weixin_44612172的博客
04-27 2107
1.在标签中加入:row-key=“getRowKeys” <el-table :data="list" :row-key="getRowKeys" style="width: 100%" @selection-change="handleSelectionChange"> 2.在显示复选框一栏中添加:reserve-selection=“true”,只对type="selection"有效,作用在数据更新之后保留之前选中的数据（需指定 row-key） <el-table-column
【Vue2 + Element UI】 解决了关于el-table表格多选后，切换分页出现的多选状态回显不正确问题。请看详细解析！--前端
2302_78387246的博客
04-18 2326
【Vue2 + Element UI】 解决了关于el-table表格多选后，切换分页出现的多选状态回显不正确问题。请看详细解析！---- 前端
vue与elementUI清空table多选框的选中状态
00年女程序员分享自己的学习笔记
09-07 5360
当把table放dialog弹框的时候，关闭dialogtable对话框需要把多选框的选中状态清空。弹框里面的表格我是引用了一个子组件。就是解释一下，引用子组件情况该怎么清空
el-select选择无变化 解决方案
m0_52724742的博客
04-26 6595
el-select选择无变化解决方案 问题重现 //伪代码 <el-select v-model='value'> <el-option v-for='item in options' :key='item.code' :label='item.label' :value='itrm.value' > </el-option> </el-select> <el-radio v-model="radio" labe
elementUI type=“selection“多选框选中 删除 回显 赋值问题 回显数组改变选中状态未改变
夏微微的博客
05-29 738
注意：:reserve-selection="true"会记录保存上一次选中的状态，所以每次赋值前要先清空选中状态。解决：@row-click配合:reserve-selection="true"使用。遇到的问题：删除之后查询列表selection回显问题。表格data赋值的地方添加。可删除可重新查询列表添加。
element+vue 表格多选时执行删除操作，刷新表格问题
总该长大了的博客
01-11 2117
今天我遇到了一个问题，当table执行多选时，走后台执行删除操作之后，再次选择之后就会加上之前删除的数据，并没有清空，重新执行选择的数据进行删除，弄了很久之后，发现了一个方法，分享给大家： 用ref绑定表格： 在执行ajax之后：清除复选框，并清除对应的数组。 这样就完美的解决了！！！ ...
element中table的表格更新数据之后保留原来的勾选状态
https://shixuebin.gitee.io/hexo-blog/
07-21 1587
仅对 type=selection 的列有效，类型为 Boolean，为 true 则会在数据更新之后保留之前选中的数据（需指定 row-key）
vue：el-table初始化表格选中项踩坑记录/element-ui表格
smm的博客
05-23 2871
el-table初始化表格选中项踩坑记录
elementui表格多选框选中
03-28
### ElementUI 表格组件中的多选框选中功能实现 在 ElementUI 的 `Table` 组件中，可以通过设置属性和事件来实现多选框的功能。以下是详细的说明： #### 属性配置 为了启用多选功能，需要将 `selection-type=...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值