vue element-ui el-table点击行 选中复选框 上一个被点击得复选框取消选中

已于 2022-07-25 18:05:26 修改
阅读量2k 收藏 4
点赞数 2
文章标签： vue.js elementui
于 2022-03-15 11:55:46 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/fdksfskldfdslkfs/article/details/123498816
版权
本文介绍了如何在Vue.js应用中使用Element-UI的el-table组件实现点击行时，自动切换复选框的选中状态。通过监听row-click事件，结合复选框选中状态和行ID，可以判断并控制多选表格的选中行为。当选中新的行时，toggleRowSelection方法用于更新选中状态，而clearSelection方法用于取消之前选中的行。
摘要由CSDN通过智能技术生成

1.首先给table绑定ref和row-click事件

<el-table
      border
      style="width: 100%"
      :data="tableData"
      v-loading="loading"
      element-loading-text="拼命加载中"
      @row-click="handleRowClick"
      ref="
最低0.47元/天 解锁文章
刘记代码
关注
  • 2
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue 实现checkbox选中，在上面显示选中的数据，删除取消选中并删除显示的数据...
梁小茹的博客
12-12 3290
实现勾选选中和删除取消
使用vue.js实现checkbox的全选和多个的删除功能
10-20
主要介绍了使用vue.js实现checkbox的全选和多个的删除功能,需要的朋友可以参考下
ElementUI el-table 单选、多选以及点击某一行的任意位置就勾选上
weixin_58101575的博客
03-15 6211
【代码】ElementUI el-table点击某一行的任意位置就勾选上。
element table点击行实现选中和取消选中（可批量）
最新发布
weixin_45638884的博客
07-23 386
element table 实现点击行 选中 取消选中
实现ElementUI表格点击某一行选中取消对应的复选框
JJ_Smilewang的博客
11-18 2544
【代码】实现ElementUI表格点击某一行选中取消对应的复选框。
el-table点击行实现选中
HL_xzf的博客
03-26 444
el-table-column prop="DevOsd" label="摄像机"> </el-table-column>
element中的table组件,el-table-column列表点击选中复选框或取消复选框
qq_34466889的博客
11-23 4243
<el-table @row-click="clickRow" ref="table" :data="tableData" stripe highlight-current-row height="calc(100% - 20px)" v-loading="tableLoading"> <el-table-column type="index" width="50"></el-table-column&.
vue基于element-ui的三级CheckBox复选框功能的实现代码
10-17
2. 反选（unchecked all）：如果一个父级复选框未被选中，那么它的所有子级复选框都未被选中。 3. 不确定（indeterminate）：如果一个父级复选框的子级复选框部分选中、部分未选中，那么父级复选框的状态就是不确定...
wl-tree-table:a tree table based on vue and element-ui，一个基于vue和element-ui的树形表格
05-11
扩展主要包括：显示边框、固定高度、显示复选框、复选框选中是否遵循父子关联、复选框禁用条件。 - 这里有一个兄弟组件-树形穿梭框： - 快速上手 npm i @weilan/el-tree-table --save 或 npm i @weilan/el-tree-...
vue+element UI实现树形表格带复选框的示例代码
10-17
在Vue和Element UI框架中，实现树形表格带复选框功能可以极大地增强用户界面的交互性和数据管理能力。以下是一些关键知识点和步骤，详细解释如何构建这样的组件： 1. **数据转换**： 树形表格的数据通常不是直接以...
详解element-ui表格中勾选checkbox，高亮当前行
12-29
我们在做后台管理系统的时候经常需要操作表格，这里我们要实现的一个功能就是，勾选复选框，高亮显示当前行，也就是当前行样式改变。这是一个非常常见的使用场景，官网给我们提供了一个带Checkbox的table表格，但是...
elementul el-table表格如何在取消勾选时获取当前行数据
seeeeeeeeeee的博客
11-10 4858
有些时候需要用到在取消勾选时获取当前行的数据，但是正常的用法你取消后返回给你的是一个空数组。 解决办法 这里我就直接把elementul上的多选表格代码直接复制过来演示了。如果想要看看效果，可以直接复制这一段代码找个空白的页面放进去看看log的信息就知道了。 老规矩，解释一下，防止新人看不懂： 这里主要是靠在el-table上用@select="handleSelect"方法实现的 下面handleSelect方法中，list参数代表所有勾选数据，item参数代表当前点击的数据。 arguments是一个类
vue el-table 单机行选中高亮并获取行数据，再次单击取消行选中
lerry的博客
04-13 6206
vue el-table 单机行选中高亮并获取行数据，再次单击取消行选中
elementUI table点击单元格选中
fengxiaopeng74的博客
02-17 3118
elementUI 表格实现选中某个单元格
el-table表格每一列前的多选框如何勾选和取消（易错点-两个坑）
weixin_52443895的博客
08-26 7501
el-table表格每一列前的多选框如何勾选和取消（易错点-两个坑）
Vue+Element Ui Table取消勾选的问题
m0_58565372的博客
09-02 6464
今天遇到个bug，就是当我对表格里面的数据进行勾选之后，然后再进行一些操作（比如：筛选、查询等）以前勾选的数据还是在勾选状态，如果不注意，再去勾选一些数据，然后操作一些其他的操作（比如删除、上下架等）就会多传给后端数据，经过测试，发现会带入以前勾选的数据，造成的原因就是，没有将以前勾选的数据，经过一系列的操作之后清空。这个时候，当你勾选了一些数据之后，然后又去筛选其他的数据时，以前勾选的数据就会清空。2.当你操作某个操作时（比如：筛选、查询）1、在表格上操作dom元素 设置ref属性。
两个el-tree切换选中状态
weixin_50860527的博客
06-15 3005
在el-tree中取消当前选中状态，你可以使用`setCurrentKey`方法，将当前选中节点的`key`值设为`null`。这将清除当前选中节点，从而取消其选中状态。在上述代码中，`$refs.tree`是el-tree组件的引用。通过调用`setCurrentKey`方法，并将参数设置为`null`，即可取消当前选中节点的选中状态。请注意，你需要确保在取消选中状态之前，确实有一个节点处于选中状态。否则，调用`setCurrentKey(null)`将没有任何效果。
elementUI中的table表格，带选择框，点击选中选择框，获取当前行id，存储数组若没有当前id，存进数组，再次点击，取消选中，从存储数组中删除id
as965874的博客
09-10 2235
需求场景：一个表格中有几十条数据，每一行代表一条，表格第一列是选择框，当点击某一行的选择框，选中此条数据，将此条数据的id存进存储数组，若点击取消选中状态，则将该条数据对应id从存储数组中删除。 template代码 <el-table :data="roleData" style="margin:15px 0" border stripe height="260" @select="(selection,row)=
vue+element-ui 树形table 最后一层有复选框
03-31
Vue Element-UI的树形Table组件可以通过设置show-checkbox属性来显示复选框，但是默认情况下只会在非叶子节点上显示复选框，如果需要在最后一层也显示复选框，可以通过以下两种方式实现： 1. 使用slot-scope自定义...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值