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

最新推荐文章于 2025-03-31 17:46:24 发布
最新推荐文章于 2025-03-31 17:46:24 发布
阅读量3.8k 收藏 6
点赞数 6
CC 4.0 BY-SA版权
分类专栏： 笔记 文章标签： elementui vue vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/rong0914/article/details/118753526
当使用ElementUI的el-table组件并进行数据删除时，遇到一个问题：删除后的表格在重新加载时，之前被选中的复选框依然保持选中状态。经过排查发现，即使删除了选中数据，界面显示仍有误。为解决这个问题，需要在清空数据后调用ElementUI的clearSelection()方法，以确保选中状态正确重置。

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

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

 this.$refs.dataTable.clearSelection(); //清除之前的选中状态
最低0.47元/天 解锁文章

200万优质内容无限畅学
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-UI中解决ele-table多选表格数据删除后，复选框依旧存在的问题
qq_46399965的博客
06-29 1930
第一步：在el-table标签里面加上自定义的ref，我这里自定义的是。第二步：找到你的删除方法，在删除成功后面加上。目的是清除复选框内容。
elementUI-plus虚拟表el-table-v2 checkbox删除后，下一个复选框又被选中且无法删除
黎小小的博客
02-16 1587
和vue 的 :key一个原理，必须设置循环数据的唯一值，才能在操作时定位到唯一数据。其他bug就是编码问题了。
el-table清除操作，列表多选切换页面还保留上次选中信息
Giraffe0615的博客
08-05 767
el-table清除操作，列表多选切换页面还保留上次选中信息
Vue3 使用ElementPlus表格组件时，删除多个选中项时会导致未选中项进行选中且无法删除
qq_52570860的博客
02-19 289
在 <el-table>标签中添加 row-key 属性保证表格中每一行的唯一性即可正确删除
解决：el-table操作完之后，复选框还是选中状态
weixin_50261167的博客
05-25 1937
解决table操作完之后，复选框还是选中状态
el-table多选表格操作可删除单行，多选复选框可删除多行
qq_52136609的博客
10-23 1021
el-table可删除多行，多选复选框可删除多行。
vue3 - element-plus实现将table表格改为单选效果，将el-table表格实现单选，多选表格变为单选形式（Table多选框改成单选框，表格添加单选框，支持复杂表格嵌套数据多层勾选）
最新发布
高级前端工程师
03-31 6489
vue3，element plus，表格Table，el-table，复选框改为单选，element-ui 表格控件实现单选功能，把多选框调整为只能单选，如何将el-table多选表格变为单选形式，el-table单选，复选框设置为单选,且可通过选择行选中复选框，elementPlus多选表格变单选，表格多选改为单选,且去除表头的多选框，el-table多选框改为单选框，table多选表格如何实现单选，如何修改ui为圆形单选radio，check复选框多选变为单选，二级嵌套表格带下级如何修改为单选表格，选中
element的el-table组件实现分页复选功能及解决批量删除后仍会选中已删除的值问题
weixin_44612172的博客
04-27 2035
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 2147
【Vue2 + Element UI】 解决了关于el-table表格多选后，切换分页出现的多选状态回显不正确问题。请看详细解析！---- 前端
vue与elementUI清空table多选框的选中状态
00年女程序员分享自己的学习笔记
09-07 5245
当把table放dialog弹框的时候，关闭dialogtable对话框需要把多选框的选中状态清空。弹框里面的表格我是引用了一个子组件。就是解释一下，引用子组件情况该怎么清空
el-select选择无变化 解决方案
m0_52724742的博客
04-26 6484
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 667
注意：:reserve-selection="true"会记录保存上一次选中的状态，所以每次赋值前要先清空选中状态。解决：@row-click配合:reserve-selection="true"使用。遇到的问题：删除之后查询列表selection回显问题。表格data赋值的地方添加。可删除可重新查询列表添加。
element+vue 表格多选时执行删除操作，刷新表格问题
总该长大了的博客
01-11 2085
今天我遇到了一个问题，当table执行多选时，走后台执行删除操作之后，再次选择之后就会加上之前删除的数据，并没有清空，重新执行选择的数据进行删除，弄了很久之后，发现了一个方法，分享给大家： 用ref绑定表格： 在执行ajax之后：清除复选框，并清除对应的数组。 这样就完美的解决了！！！ ...
element中table的表格更新数据之后保留原来的勾选状态
https://shixuebin.gitee.io/hexo-blog/
07-21 1468
仅对 type=selection 的列有效，类型为 Boolean，为 true 则会在数据更新之后保留之前选中的数据（需指定 row-key）
vue：el-table初始化表格选中项踩坑记录/element-ui表格
smm的博客
05-23 2767
el-table初始化表格选中项踩坑记录
ElementUI checkbox同时选中
xiaowangzibuhappy的博客
04-30 2959
ElementUI的checkbox小操作 起因 今天在工作的时候，碰到一个比较有意思的小问题，就是Element的checkbox选择问题。 想要实现选中1个另外一个也自动被选中，取消选中另一个也被取消选中。 成品 步骤 首先获取点击的checkbox 查看当前点击的需不需要其他一起变化 判断当前点击的是选中还是取消 其他按钮跟着变化 原理 ElementUI中的checkbox会把数据存...
vue element 清空checkbox选过的数据
Khun_HWJ的博客
12-03 3494
勾选完后关闭弹窗，再打开时选中的值还是选中了，需要打开时就清空 这里el-checkbox-group 绑定的model起作用了 this.scales = [] 这样就可以不选中了
elementui表格多选框选中
03-28
### ElementUI 表格组件中的多选框选中功能实现 在 ElementUI 的 `Table` 组件中，可以通过设置属性和事件来实现多选框的功能。以下是详细的说明： #### 属性配置 为了启用多选功能，需要将 `selection-type="multiple"` 或者通过列定义的方式引入一个多选列。具体来说，在 `el-table-column` 中指定 `type="selection"` 来创建一个多选列[^3]。 ```vue <template> <el-table :data="tableData" @selection-change="handleSelectionChange"> <!-- 多选列 --> <el-table-column type="selection" width="55"></el-table-column> <!-- 其他数据列 --> <el-table-column prop="name" label="Name" width="120"></el-table-column> <el-table-column prop="age" label="Age" width="80"></el-table-column> </el-table> </template> <script> export default { data() { return { tableData: [ { name: 'John', age: 25 }, { name: 'Doe', age: 30 } ], selectedRows: [] }; }, methods: { handleSelectionChange(selection) { this.selectedRows = selection; console.log('Selected Rows:', this.selectedRows); } } }; </script> ``` 上述代码片段展示了如何在 Vue.js 和 ElementUI 中使用 `el-table` 实现多选功能。其中的关键部分在于设置了 `type="selection"` 的 `<el-table-column>` 列以及监听了 `@selection-change` 事件用于捕获当前被选中的行列表[^3]。 #### 获取已选项 当用户点击表格中的复选框时，会触发 `selection-change` 事件，并传递一个数组参数表示目前所有的选中项。这些选中项可以存储到组件的状态变量中以便后续操作，比如批量删除或者导出所选记录等场景下非常有用[^4]。 #### 功能扩展 如果希望自定义全选逻辑或者其他交互行为，则可能还需要额外处理一些细节，例如绑定整个表头的全选状态同步更新子项的选择情况等等。这通常涉及到更复杂的业务需求分析和技术方案设计[^5]。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值