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

最新推荐文章于 2024-05-29 10:03:31 发布
最新推荐文章于 2024-05-29 10:03:31 发布
阅读量587 收藏 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表格点击整行选择_element ui table（表格）实现点击一行展开功能
weixin_35562134的博客
01-17 1124
前言element ui是一个非常不错的vue的ui框架，element对table进行了封装，简化了vue对表格的渲染。element ui表格中有一个功能是展开行，在2.0版本官网例子中，只可以点击右箭头可以展开，我们的很多需求是点击某一行展开那是不是无法实现呢？其实，借助element ui的一些属性，轻松实现点击某行展开，我们还是用2.0.9版本官网的例子，对齐改造，使之可以做到这点:da...
详解element-ui表格中勾选checkbox，高亮当前行
10-16
主要介绍了详解element-ui表格中勾选checkbox，高亮当前行，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
el-table里点击行进行选中整行
changyana的博客
08-03 5326
element的table行点击进行选中 在html里，主要注意在el-table里的属性 <el-table v-loading="loading" :data="studentList" @selection-change="handleSelectionChange" @row-click="btn" ref="eltableCurrentRow"> </el-table> 在data里增加 f
ElementUI el-table 单选、多选以及点击某一行的任意位置就勾选上
weixin_58101575的博客
03-15 6125
【代码】ElementUI el-table点击某一行的任意位置就勾选上。
el-table实现单选及点击当前行选中
最新发布
m0_58293192的博客
05-29 1014
el-table实现单选及点击当前行选中
el-table如何在@row-click里获取点击行的index索引
热门推荐
weixin_43258184的博客
04-13 1万+
总结： 利用 :row-class-name=“tableRowClassName” 属性给每一行row的数据对象里添加index属性。 第一步： 给el-table，添加:row-class-name="tableRowClassName"和 @row-click=“clickRow” <el-table :row-class-name="tableRowClassName" :data="tableList" border stripe
Vue 给el-table表格添加整行Click点击事件
潮汐未见潮落的博客
06-16 9617
el-table表格添加整行click事件
Vue使用element中table组件实现单选一行
见贤思齐焉，见不贤内自省
07-21 3724
Vue使用element中table组件实现单选一行
element中el-table组件 一整行点击都可以跳转
weixin_41549971的博客
02-01 1480
element中el-table组件 一整行点击都可以跳转
elementUI el-table @row-click 解决行内冲突--忽略指定列区域点击效果
Sunshine_Jian的博客
12-22 7798
单击el-table行的时候；忽略指定列；
使用element-ui table expand展开行实现手风琴效果
10-17
在本文中，我们将深入探讨如何使用Element-UI的Table组件中的`expand`功能来实现手风琴效果。Element-UI是基于Vue.js的UI库，提供了丰富的组件供开发者使用，其中包括表格（Table）组件，它支持展开行以显示更多详细...
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`等属性来同步当前路由和菜单状态，并在组件初始化时根据...
Element UI el-table实现只能选中一行
Da_Xiong的博客
01-11 3348
Element UI el-table实现只能选中一行
el-table的行点击row-click事件获取行索引
m0_53251830的博客
04-27 8165
el-table的行点击row-click事件获取行索引
解决vue项目中 el-table 的 @row-click 事件与行内点击事件冲突
Sunshine_Jian的博客
12-22 1万+
场景：点击行内按钮事件的时候，同时也出发触发了行的事件； 因为行内按钮的父元素是单元格，而单元格的父元素是行； 最里层子元素接收到事件后，再层层向上传递给父元素；
解决el-table的操作栏点击和row-click冲突问题
我是小鹏呀的博客
01-31 1336
解决方法：原生标签使用@click.stop，按钮el-button不是原生标签使用@click.native.stop，阻止事件冒泡。问题：点击el-table某一行跳转到详情页，使用row-click（当某一行被点击时会触发该事件）后，会导致点击操作栏的按钮也会触发。
实现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中，el-table表格的 @select 、@row-click 实现只能选中一行
new_Petrichor的博客
10-28 5455
！！！只贴上用到的代码部分！！！ 首先是@select，
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、付费专栏及课程。

余额充值