element ui中点击其他单选框，会把table中选中的多选框清空

最新推荐文章于 2024-05-10 09:26:14 发布
最新推荐文章于 2024-05-10 09:26:14 发布
阅读量2.4k 收藏 3
点赞数
分类专栏： elementui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_26308627/article/details/84787707
版权

element ui中点击其他多选框，会把table中选中的多选框清空

前提

需要将选中的table行数据，通过选择单选框组的某一个，对这些数据进行操作，但是发现选择table行之后再点击单选框，table中选中的多选框被清空了

原因

因为table和分页结合了，所以对数据用了一个方法处理
在这里插入图片描述
就是这个方法导致了点击单选框的时候，table中选中的多选框清空

解决方法

将这个方法放在函数中执行，通过当前页改变和每页条数的方法来动态改变
在这里插入图片描述
在这里插入图片描述

其他

不光是这个，还有点击其他事件，也会有清空多选框的现象
例如：element ui中的dialog打开事件会把table中选中的多选框清空
原文地址：
https://segmentfault.com/q/1010000015055302

双子座的萌萌
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
解决element-ui里的下拉多选框 el-select 时,默认值不可删除问题
10-14
主要介绍了解决element-ui里的下拉多选框 el-select 时,默认值不可删除问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
在vue和element-ui的table中实现分页复选功能
10-15
主要介绍了在vue和element-ui的table中实现分页复选功能，本文代码结合图文的形式给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
element的el-table 解决表格多页选择数据时，数据被清空
weixin_43923808的博客
04-30 723
【代码】element的el-table 解决表格多页选择数据时，数据被清空。
vue element ui中打开dialog会把table中选中的多选框清空
hdrtrr的博客
06-16 2013
过程描述 在vue项目中，使用了 重现 1.选中，然后打开弹窗 2.结果，选中的行就会被清空 导致原因 原因是在table使用了过滤 去掉 记录下，以便后面开发重遇！
Element-ui el-table组件单选/多选/跨页勾选讲解
最新发布
日常笔记/总结/系列知识梳理
05-10 2297
el-table是 Element UI（一个基于 Vue.js 的高质量 UI 组件库）中的一个组件，用于展示表格数据。通过el-table，你可以很方便地创建具有多种功能（如排序、筛选、分页等）的表格。
vue与elementUI清空table多选框的选中状态
00年女程序员分享自己的学习笔记
09-07 4257
当把table放dialog弹框的时候，关闭dialogtable对话框需要把多选框的选中状态清空。弹框里面的表格我是引用了一个子组件。就是解释一下，引用子组件情况该怎么清空
使用element-ui的el-table和el-pagination标签实现表格分页功能以及解决遇到的暂无数据的bug
Arlisol的博客
02-24 9383
博主需要在项目中需要使用el-table和el-pagination标签实现表格分页功能，方法如下： el-table标签的data属性是显示的数据，绑定为showTable计算属性 <el-table :data="showTable" :header-cell-style="{background:'#eef1f6',color:'#606266'}" ...
element组件库解决table表格复选框选中后被清空问题
m0_51499501的博客
09-06 1811
1.el-table 标签上添加 :row-key=“getRowKey” 行数据的 Key，用来优化 Table 的渲染；在使用 reserve-selection 功能与显示树形数据时，该属性是必填的。类型为 String 时，支持多层访问：user.info.id，但不支持 user.info[0].id，此种情况请使用 Function。 getRowKey(row) { // console.log(’================:’, JSON.stringify(row)) return
清空element表格的多选择状态
qq_40549954的博客
02-04 2174
this.$refs.multipleTable.clearSelection();
vuejs+element UI table表格中实现禁用部分复选框的方法
12-13
有时候我们构建这样带一列复选框的表格 ...以上这篇vuejs+element UI table表格中实现禁用部分复选框的方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持软件开发网。
vue基于element-ui的三级CheckBox复选框功能的实现代码
10-17
最近vue项目需要用到三级CheckBox复选框，需要实现全选反选不确定三种状态。这篇文章主要介绍了vue基于element-ui的三级CheckBox复选框功能的实现方法,需要的朋友可以参考下
vue+element UI实现树形表格带复选框的示例代码
10-17
在Vue和Element UI框架中，实现树形表格带复选框功能可以极大地增强用户界面的交互性和数据管理能力。以下是一些关键知识点和步骤，详细解释如何构建这样的组件： 1. **数据转换**： 树形表格的数据通常不是直接以...
elementui table中selection分页改变回来之后 selection状态丢失问题
qwe19991123的博客
12-01 1228
前两天遇到得这个问题，因为每个页面都会重新请求接口，然后判断数据的一个字段来确定radio的状态，这时候就有个问题，例：第一页选中一个radio，去到第二个页面选中一个radio，在之后回到第一个页面，第一个页面重新申请数据，radio状态丢失。 因为功能是选中所需radio之后有个确定按钮要将这些所选提交，之前写的逻辑是如果选中之后会将所选内容添加到一个数组里面， 然后判断radio状态和数组中是否有 如果radio没有选中 数组中也没有 选中之后添加到数组中 如果数组中有 状态未选中那就在数组中
element ui 表格跨页选择(包含表格多选清空)
XYZS_520的博客
02-21 1047
<el-table :data="dataList" stripe ref="drawTable" :row-key="getRowKeys" @selection-change="handleSelectionChange" > <el-table-column align="center" type="selection" :reserve-selection="true" > </el-table-column> </el-tab
基于el-table二次封装的表格组件，toggleRowSelection 默认选中事件被清空的问题
qq_46370075的博客
04-24 1868
从详情页点编辑进入表格页的时候，有时候需要默认选中一些数据。 在el-table中的文档中能看到可以使用roggleRowSelection方法来默认选中一些数据。 // checkList 需要默认被选中的数组 // dataList 表格中展示的数组，也就是el-table的:data对应的数组 // 表格组件 添加ref属性 ref="table" checkList.forEach(listItem => { dataList.forEach(item => {
el-table中懒加载数据所选项被清空，阻止自动触发selection-change
woderuiggya的博客
03-16 561
添加row-key以及:reserve-selection=“true”
vue element table树形数据表格点击折叠icon icon消失，数据也并没有展示出来（已解决）
蓝胖子的博客
09-16 2414
vue element table树形数据表格点击折叠icon icon消失，数据也并没有展示出来（已解决）
怎样解决ElementUI下table多选分页后选中回显、勾选分页后不保存问题
wwngxu的博客
06-25 2153
怎样解决vue+ElementUI下table多选分页后选中回显、勾选分页后不保存问题和 解决选中后清除选中状态的问题
element ui table单选框
03-16
Element UI Table 单选框是指在 Element UI 的表格组件中，可以通过单选框来选择一行数据。用户只能选择一行数据，而不能同时选择多行。这种单选框可以用于需要用户选择一个选项的场景，比如在管理系统中选择一个用户进行编辑或删除。在 Element UI 中，可以通过设置 table 的属性来启用单选框功能，同时也可以自定义单选框的样式和行为。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值