element-ui中的table，实现点击当前行就会选中当前行

最新推荐文章于 2024-05-29 10:03:31 发布
最新推荐文章于 2024-05-29 10:03:31 发布
阅读量511 收藏 1
点赞数 1
文章标签： vue.js elementui 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_63237100/article/details/138847831
版权

给el-table绑定row-click事件

handleRowClick的代码如下

   // 点击行触发事件
    handleRowClick(row) {
      row.isSelected = !row.isSelected;
      this.$refs.companyListTable.toggleRowSelection(row);
    },

这样就能实现点击行的任意位置就会选中当前行，但是存在某些特定列被点击的时候不需要选中当前行的情况，比如操作栏中的编辑删除按钮等

这个时候可以给当前列绑定点击事件，加上.stop修饰符就可以了

如

鲸落_Libra
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
使用element-ui table expand展开行实现手风琴效果
10-17
在本文中，我们将深入探讨如何使用Element-UI的Table组件中的`expand`功能来实现手风琴效果。Element-UI是基于Vue.js的UI库，提供了丰富的组件供开发者使用，其中包括表格（Table）组件，它支持展开行以显示更多详细...
element ui表格点击整行选择_element ui table（表格）实现点击一行展开功能
weixin_35562134的博客
01-17 1122
前言element ui是一个非常不错的vue的ui框架，element对table进行了封装，简化了vue对表格的渲染。element ui表格中有一个功能是展开行，在2.0版本官网例子中，只可以点击右箭头可以展开，我们的很多需求是点击某一行展开那是不是无法实现呢？其实，借助element ui的一些属性，轻松实现点击某行展开，我们还是用2.0.9版本官网的例子，对齐改造，使之可以做到这点:da...
ElementUI el-table 单选、多选以及点击某一行的任意位置就勾选上
weixin_58101575的博客
03-15 6075
【代码】ElementUI el-table点击某一行的任意位置就勾选上。
el-table实现单选及点击当前行选中
最新发布
m0_58293192的博客
05-29 886
el-table实现单选及点击当前行选中
el-table的行点击row-click事件获取行索引
m0_53251830的博客
04-27 8149
el-table的行点击row-click事件获取行索引
Vue使用element中table组件实现单选一行
见贤思齐焉，见不贤内自省
07-21 3717
Vue使用element中table组件实现单选一行
Element UI el-table实现只能选中一行
Da_Xiong的博客
01-11 3340
Element UI el-table实现只能选中一行
elementPlus中table的某一行点击会触发一个事件row-click，如何在某一个单元格点击的时候阻止该事件触发
daodaoaixuexi的博客
07-20 2822
elementPlus的@row-click="handleRowClick"事件，点击某个单元格，不触发该事件
实现elementUI的Table 表格表格只能同时选中一行
weixin_60548926的博客
04-08 1218
<el-table height="94.8%" ref="multipleTable1" type="index" border style="width: 96%; border-bottom: 1px solid black" :data="tableData1" @select="select" > &...
详解element-ui表格中勾选checkbox，高亮当前行
10-16
主要介绍了详解element-ui表格中勾选checkbox，高亮当前行，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
wl-tree-table:a tree table based on vue and element-ui，一个基于vue和element-ui的树形表格
05-11
el-tree-table组件基于vue和element-ui，在 的实现基础上增加一些新特性。 并在此声明treetable的业务实现再来上述开源项目，如有冒犯，请及时联系。 共同依据element-ui的写成。 扩展主要包括：显示边框、固定高度...
使用element-ui的el-menu导航选中后刷新页面保持当前选中状态
10-16
综上所述，要实现在Element-UI的`el-menu`导航中保持刷新后选中状态，我们需要结合Vue Router和`el-menu`的特性，通过`default-active`和`default-openeds`等属性来同步当前路由和菜单状态，并在组件初始化时根据...
vue el-table @row-click 事件与行内点击事件冲突解决
qq_41513941的博客
03-23 1466
1、按钮是el-button标签，为点击事件加.native.stop ，即 @click.native.stop=“handleClick(scope.row)”2、按钮是原生标签，为点击事件加.stop ，即 @click.stop=“handleClick(scope.row)”
elementui中@row-click 和 @row-dbclick 不能同时使用的解决思路
qq_18945257的博客
10-16 2367
在 Element UI 中，@row-click和@row-dbclick是表格组件（el-table）中用于监听行点击和双击事件的两个事件属性。根据 Element UI 的文档，确实不能同时使用这两个事件属性。
el-table中row-click调用两次问题
jl____的博客
09-21 2570
el-table中row-click调用两次问题
elementUI table组件默认选中行
heirui的专栏
09-11 2245
<template> <el-table ref="multipleTable" :data="tableData" @row-click="handleRowChange"> <el-table-column type="selection" width="55"> </el-table-column> <el-table-column prop="name" .
element-ui table组件 点击任意行位置触发该行选中
heal_l的博客
06-23 1309
关键方法：toggleRowSelection
Vue2 Element多选表格 row-click选取与行禁用
白瑕 的博客
11-08 3505
点击行, 和点击选取框都不再能进行选取.
el-table 点击行自动勾选
m0_71835253的博客
12-14 647
就可以实现点击行的时候自动勾选。
element-ui 复选框,实现点击表格当前行选中或取消
05-26
可以通过监听表格的行点击事件，在事件回调函数中更新当前行的复选框状态来实现。 具体实现步骤如下： 1. 在表格组件上添加 `@row-click` 事件监听器。 ```html <el-table :data="tableData" @row-click="handleRowClick"> <!-- 表格列定义 --> </el-table> ``` 2. 在事件回调函数中获取当前行的索引，并更新当前行的复选框状态。 ```js methods: { handleRowClick(row) { // 获取当前行的索引 const index = this.tableData.indexOf(row); // 更新当前行的复选框状态 this.$refs.multipleTable.toggleRowSelection(this.tableData[index]); } } ``` 需要注意的是，这里使用了 `$refs` 来获取表格组件的实例，并调用了 `toggleRowSelection` 方法来更新复选框状态。在模板中需要给表格组件添加 `ref` 属性： ```html <el-table :data="tableData" ref="multipleTable"> <!-- 表格列定义 --> </el-table> ``` 完整代码示例： ```html <template> <div> <el-table :data="tableData" @row-click="handleRowClick" ref="multipleTable"> <el-table-column type="selection" width="55"></el-table-column> <el-table-column prop="name" label="姓名"></el-table-column> <el-table-column prop="age" label="年龄"></el-table-column> </el-table> </div> </template> <script> export default { data() { return { tableData: [ { name: '张三', age: 20 }, { name: '李四', age: 25 }, { name: '王五', age: 30 } ] } }, methods: { handleRowClick(row) { const index = this.tableData.indexOf(row); this.$refs.multipleTable.toggleRowSelection(this.tableData[index]); } } } </script> ```

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值