9-Vue中使用elment的el-table时@row-click与@selection-change耦合问题

最新推荐文章于 2024-07-08 20:41:45 发布
最新推荐文章于 2024-07-08 20:41:45 发布
阅读量2.3k 收藏 1
点赞数
分类专栏： # Vue中遇到的问题 文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sinat_41124751/article/details/106279707
版权

Vue中使用elment的el-table标签时，引用了@row-click与@selection-change方法，结果会出现点击行时，多选框也会被选中，官方文档中如下显示，引用事件用@XXX，出现了冲突，网上搜索许多方法，发现这一方法好用↓↓↓

采用阻止冒泡，在字元素中添加可以阻止向上传递触发事件

event.cancelBubble = true;

加入这一行代码后，即可解决该问题~

只是简单的理解，若有错误还望谅解指正！ 

天天yaya吖
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue修改Element的el-table样式的4种方法
10-14
在Vue.js中，Element UI库提供了丰富的组件，其中包括el-table，用于创建数据表格。然而，有时我们可能需要根据项目需求自定义el-table的样式。本文将详细介绍四种在Vue中修改Element UI el-table样式的有效方法。 ...
web前端-Vue中使用elment的el-table时@row-click与@selection-change
MinggeQingchun的博客
12-02 2033
Vue中使用elment的el-table标签时，引用了@row-click与@selection-change方法；官方文档中如下显示 1、el-table事件绑定@selection-change如何自定义传参 <template> <el-table ref="tableData" :data="tableData" stripe tooltip-effect="d.
element ui table 多选且可以点击行勾选数据
Igiveufireworks的博客
05-05 2450
toggleRowSelection用于多选表格，切换某一行的选中状态，使得点击行即可进行选择。
elementui的table的@selection-change阻止事件改变
最新发布
qq_42730111的博客
07-08 412
说明：最近有个不想说的（xxx）业务，在表格勾选每一行的时候要触发一系列查询功能，查询失败还要把那个勾勾回退。真实蛋疼！表格勾选的默认@selection-change是change事件，一般change事件是在完成之后才触发，不能在触发之前进行阻止操作。想了想，查了查，各种神仙操作，算了不看了脑瓜疼！就想通el-checkbox来代替表格原生的@selection-change事件咯，反正都是多选！安排！
element-UI中table表格的@row-click事件和@selection-change耦合了
qq_38698753的博客
08-02 1万+
&lt;el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%" @row-click="openDetails" @selection-change="handleSelectionChange"&gt; &lt;el-table-co
element-ui 使用中遇到的问题及处理方法
fmtzy1991的博客
10-25 1156
1.table @selection-change与@row-click解耦合,触发方法内加入这两行: checkData(val, column, event){ event.preventDefault(); //防止@selection-change与@row-click事件耦合 event.cancelBubble = true; //IE适配 2.table @row-click事件与行内@click事件耦合问题，给@click事件
element table表格选中事件
qq_43787947的博客
07-27 1万+
主要使用的是ElementUI table表格 1 select 事件 当用户手动勾选数据行的 Checkbox 时触发的事件 参数selection, row 2 row-click 事件 当某一行被点击时会触发该事件 参数 row, column, event 3 selection-change 事件 当选择项发生变化时会触发该事件 参数 selection 4 clearSelection 方法 用于多选表格，清空用户的选择 5 toggleRowSelection 方法 用于多选表格，切换某一行的
关于element-ui中table表格的坑
sxs7970的博客
07-16 311
使用element-ui的table的时候，遇到的坑，在使用@row-click和@selection-change 同时的时候，貌似耦合了，直接上：解决方法 <el-table @selection-change="onChange_selectChange" ref="twoTable" :data="tableData" style="width: 100%" :expa.
el-table-infinite-scroll:El-Table无限滚动
05-26
查看实例教程此指令依赖于 element-ui@2.12.0，使用前请熟悉：element-ui@2.12.0element-ui@2.12.0安装npm install --save el-table-infinite-scroll全局引入import Vue from 'vue';import elTableInfiniteScroll ...
vue+element获取el-table某行的下标,根据下标操作数组对象方式
10-14
主要介绍了vue+element获取el-table某行的下标,根据下标操作数组对象方式，具有很好的参考价值，希望对大家有所帮助。一起跟随想过来看看吧
Vue3+element-plus-table-dragable(Sortable.js)实现表格拖动排序
06-15
2022/09/02更新： 下边网友发现有新的方案：...table样式完全模拟了el-table组件样式。看官方文档两天也不如直接看一个完整的实例。 需要安装依赖：npm i -S vuedraggable@next
vue-cli3.0+element-ui上传组件el-upload的使用
10-17
在本篇文章中，我们将详细探讨如何在vue-cli3.0环境中使用Element UI的上传组件el-upload。el-upload组件允许用户上传文件，并且可以进行一系列的定制和限制，以满足各种需求。 首先，`<el-upload>`组件的基本用法...
解决Vue对Element中的el-tab-pane添加@click事件无效
06-06
解决Vue对Element中的el-tab-pane添加@click事件无效
element-demi:在Vue 2 3中使用Element UI的适配器
05-09
一个在Vue 2/3中使用Element UI的适配器。 :yo-yo: 只是个玩具 该库旨在测试postinstall npm挂钩。 安装完所有软件包之后。 该脚本将开始检查已安装的Vue版本，并根据本地Vue版本将导出重定向到。 :package: 安装 ...
vue-element-admin中文版本
07-20
在 "vue-element-admin" 项目中，你将找到以下关键知识点： 1. **Vue CLI**：Vue-element-admin 基于 Vue CLI（Vue 的命令行工具）构建，它提供了一套自动化的工作流，用于快速初始化项目，包括自动配置打包、热...
el-data-table:element基于element-ui，轻松实现结界
05-13
创建el-data-table来解决业务问题，因此在其中设置了CRUD逻辑。 例如，要开发user api，请假设其相对路径如下： / api / v1 / users 宁静的CRUD API应该是： 取回 GET / api / v1 / users ? page = 1 & size = 10...
详解element-ui el-table表格中勾选checkbox(selection)，高亮当前行高亮某一行(某一行设置特殊的样式)
我驾驶汽车从不是为了从A点到达B点，我喜欢去感受汽车，与之交流，与之融为一体。
07-06 4400
【代码】详解element-ui el-table表格中勾选checkbox(selection)，高亮当前行高亮某一行(某一行设置特殊的样式)
Vue----Element UI 表格点击某一行完成选中事件或取消选中事件
热门推荐
xyy1234567891的博客
05-22 1万+
需求：点击表格的某一行，即可触发选中该行。 如同element table中组件提供了单选的支持，只需要配置highlight-current-row属性即可实现单选。如下图。但element仅提供了单选，那多选的情况如何实现呢？ 多选点击效果如下：选中某一行后，相当于对应的checkbox被选中 实现如下： 界面：在表格上添加以下三个参数 <el-table border ref="serveTable" :data="tableData" @selection-
Element UI 开发中遇到的问题和解决方案
weixin_53271997的博客
06-18 258
主要介绍使用ElementUI遇到的一些问题和解决方案
vue3中element el-tree组件@change事件怎么判断是选中还是取消选中
05-23
在Vue3中，Element UI的el-tree组件的@change事件会传递两个参数： 1. 选中的节点数组 2. 取消选中的节点数组 因此，我们可以通过判断这两个数组是否为空，来确定是选中还是取消选中。具体代码如下： ```html <template> <el-tree :data="data" :props="defaultProps" show-checkbox @change="handleTreeChange" ></el-tree> </template> <script> export default { data() { return { data: [ { label: "一级 1", children: [ { label: "二级 1-1", }, { label: "二级 1-2", }, ], }, { label: "一级 2", children: [ { label: "二级 2-1", }, { label: "二级 2-2", }, ], }, ], defaultProps: { children: "children", label: "label", }, }; }, methods: { handleTreeChange(selectedNodes, deselectedNodes) { if (selectedNodes.length > 0) { console.log("选中节点：", selectedNodes); } if (deselectedNodes.length > 0) { console.log("取消选中节点：", deselectedNodes); } }, }, }; </script> ``` 在该示例中，我们在el-tree组件的@change事件中，通过传入的两个参数selectedNodes和deselectedNodes分别判断选中和取消选中的节点，并在控制台中输出相应的信息。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值