解决vue中 el-card click点击事件失效的问题

最新推荐文章于 2024-11-29 00:34:07 发布
原创 最新推荐文章于 2024-11-29 00:34:07 发布 · 4.4k 阅读 · 3 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍在Vue中如何正确使用点击事件，特别是在Card组件上的应用。通过将@click替换为@click.native，可以实现对原生点击事件的支持，从而解决事件处理的问题。

官方文档上并没有写这个点击事件
一般我们会把card放在最外层，然后第二层再套一个支持回调函数的组件标签 这样的话好处理
但是如果要用点击事件的话其实只要把
@click="useclick(‘111’)
替换为
@click.native="useclick(‘111’)就可以完美解决了

Vue3 - Element Plus 级联选择器 el-cascader 组件设置点击 label 文字直接选中，无需点击圆形单选框选中（解决开启 “单选模式“ 后无法通过点击整行直接选中的问题）
🏆 前端领域优质创作者
01-30 1万+
vue3，elementplus，el-cascader，Cascader级联选择器，checkStrictly:true怎么点击文字选中效果，elementplus级联选择器设置checkStr选择任意一级选项,怎么点击文字行选中，如何点击每行的文字就能实现选中，怎么点文字就选中，实现点击label标题就选择，只能点单选框选中不能点label文字行，点文字没反应无法选中，级联选择器点击文字选择，隐藏前面的单选框，el-cascader点击文字选择，只能点击圆圈才能选中，隐藏单选框并且点击整行直接选中，
解决elementUI中el-form、el-dialog、数据回显同时用时，有bug
阿超的博客
10-29 4881
第一次打开网页，先点击修改，再点击新增，发现输入框竟然有值， 点击修改后，关闭对话框的时候，置空失效了
【Vue-Element】el-card 的click点击事件失效解决
feifeiyechuan的博客
06-20 5548
native修饰符的作用就是把一个vue组件转化为一个普通的HTML标签，并且该修饰符对普通HTML标签是没有任何作用的。在element-ui中，突然发现在el-card中添加click事件，怎么点击都触发不了。当然，为什么el-card不支持click，暂不清楚。查资料，说是点击事件需要写成。
解决el-card上绑定@click事件，点击无效
qq_45854695的博客
11-29 1654
elemnetUI组件el-card上绑定@click事件，点击无效
element-plus的el-calendar日历组件使用#date-cell插槽踩坑不生效
weixin_50041614的博客
11-03 4103
element-plus的el-calendar日历组件使用#date-cell插槽踩坑不生效
element el-card 点击事件失效
qq_52088345的博客
11-18 648
click改为@click.native。
element 卡片el-card 点击事件不生效
陈新科的博客
12-24 2210
加个.native就可以：@click.native="obj" .native修饰符的作用就是把一个vue组件转化为一个普通的HTML标签，并且该修饰符对普通HTML标签是没有任何作用的。
vue-seamless-scroll 点击click失效
前端学习分享
11-06 1147
vue-seamless-scroll +click失效
关于一些bug的解决1、el-input的输入无效2、搜索之后发现数据不对3、el多选框、单选框点击无用4、
m0_56666791的博客
11-22 1727
其实这几种报错内核就是一个数组在处理的时候自身也在改变 并不是处理之后赋值给其他数组就完事 其实原先的数组也会改变这对数据查询以及节约代码量又很好的指导这种报错出现的时候一定要回看自己的数据格式是否有问题，寻找别人的方法 或者是查看报错信息../../assets/svg/搜索.svg。
el-calendar 日历点击事件获取不到问题
热门推荐
The_more_more的博客
06-26 1万+
el-calendar 日历点击事件获取不到问题
vue 中el-card点击事件失效解决
weixin_34403976的博客
09-11 1883
click后面加 .native @click="open(0) //替换为 @click.native="open(0) @click.native 的作用：给组件绑定原生事件
点击卡片内部的按钮会触发卡片本身的点击事件
m0_56390097的博客
09-28 1045
卡片内部按钮会触发卡片的点击事件
前端element-ui组件库el-card卡片【hover效果与点击事件(点击无效用@click.native=““)解决】
在写作的路上持续输出。
09-22 9891
前端element-ui组件库el-card卡片【hover效果与点击事件(点击无效用@click.native="")解决】
elementUI点击el-card选中变色，且点击别的空白处不变色
HD243608836的博客
01-09 2503
其实这里的也可以换成普通的标签，只需要给该指定好一个css即可。的方法，而不是我们想调用的原生click方法。（具体查看“@”在vue标签中的应用）其中el-card是自带的css样式，浏览器F12开发者模式可查。@click.native是在vue中，避免vue父模块调用成了vue成子模块中的。（普通元素类似input或button按钮不用。由于div不支持:focus伪类，可通过增加。="1"，直接使用:focus）属性使其支持css伪类。
ElementUI Card组件触发点击事件
qq_45228330的博客
12-20 9820
遇到的问题： 在做卡片点击改变样式时发现el-card组件点击方法没有触发到。 解决方式： @click = method(x,y)替换成@click.native = method(x,y) 参考链接: https://blog.youkuaiyun.com/weixin_43937526/article/details/120410660.
el-cascader组件实现点击、递归勾选联动子集children所有选项被选中。
我驾驶汽车从不是为了从A点到达B点，我喜欢去感受汽车，与之交流，与之融为一体。
06-28 1008
【代码】el-cascader组件实现点击、递归勾选联动子集children所有选项被选中。
el-card绑定事件失效问题解决——2021-07-23
m0_51400566的博客
07-23 472
css实现循环滚动卡片样式
qq_45717424的博客
12-28 1463
效果图： 这是我仿照牛客网首页制作出来的动画，把它放到了我的期末项目里感觉还不错。 html部分： 1.el-card的点击事件要写成@click.native，如果是@click将不会触发 2.要给每个el-card设置动画延迟开始时间animation-delay，目的是让他们一个一个的滚动，而不是叠在一起滚动 <!-- 大厂展示--> <div id="companys" class="companys"> <h1 .
ElementUI 之 Cascader 级联选择器指定 value label
weixin_30670925的博客
08-17 1137
　　ElementUI 的 Cascader 级联选择器个人觉得很好用，但是对 :options="options" 里的数据格式是有特定要求的：input 框显示的值是 options 里的label 值。如果 options 的键值对不是 value label ，就需要 props 来配置。 如何配置 value label？ <el-cascade...
el-tabs导致el-table列顺序不对
最新发布
10-01
<think>我们正在解决的是“el-tabs导致el-table列顺序不对”的问题。根据提供的引用，虽然引用中没有直接提到列顺序问题，但我们可以根据经验分析可能的原因和解决方案。 可能的原因： 1. **el-tabs的渲染机制**：el-tabs在默认情况下会一次性加载所有tab-pane的内容（即使当前不可见），这可能导致el-table在初始化时因为不可见而计算错误（如列宽度、列顺序等）。 2. **el-table的列渲染依赖容器宽度**：el-table在初始化时会根据容器宽度计算列宽和列顺序（尤其是在响应式布局中，当宽度不足时可能会调整列的位置）。如果el-table在隐藏的tab-pane中初始化，由于此时容器宽度为0，可能会导致列顺序错乱。 解决方案思路： 1. **使用lazy属性延迟渲染**：给el-tabs设置`lazy`属性，这样只有激活的tab才会渲染其内容，避免隐藏tab中的el-table在初始化时因容器宽度为0而导致列顺序错乱。 2. **在tab切换时重新布局el-table**：当tab切换时，强制让el-table重新计算布局（调用其`doLayout`方法）。 具体步骤： ### 方法一：使用lazy延迟加载 在el-tabs上设置`lazy`属性，确保只有当前激活的tab才会渲染el-table。 ```vue <el-tabs v-model="activeTab" type="card" @tab-click="handleTabClick" lazy> <el-tab-pane label="第一个标签" name="first"> <el-table :data="tableData1"> <!-- 列定义 --> </el-table> </el-tab-pane> <el-tab-pane label="第二个标签" name="second"> <el-table :data="tableData2"> <!-- 列定义 --> </el-table> </el-tab-pane> </el-tabs> ``` ### 方法二：在tab切换时重新计算表格布局 在tab切换事件中，获取当前激活的tab中的el-table组件，并调用其`doLayout`方法。注意：由于v-if或lazy可能导致表格还未渲染，因此需要在下一个tick中调用。 ```vue <template> <el-tabs v-model="activeTab" type="card" @tab-click="handleTabClick"> <el-tab-pane label="第一个标签" name="first"> <el-table ref="table1" :data="tableData1"> <!-- 列定义 --> </el-table> </el-tab-pane> <el-tab-pane label="第二个标签" name="second"> <el-table ref="table2" :data="tableData2"> <!-- 列定义 --> </el-table> </el-tab-pane> </el-tabs> </template> <script> export default { data() { return { activeTab: 'first', tableData1: [], tableData2: [] }; }, methods: { handleTabClick(tab) { // 在下一个tick中调用，确保表格已经渲染 this.$nextTick(() => { // 根据当前激活的tab找到对应的table ref，并调用doLayout const tableRef = this.$refs[`table${tab.index + 1}`]; if (tableRef) { tableRef.doLayout(); } }); } } }; </script> ``` ### 注意事项 - 如果使用v-if来控制tab-pane内容的显示（替代lazy），同样需要在切换时重新计算表格布局，因为表格在初次渲染时可能因为容器宽度变化而顺序错乱。 - 如果列顺序错乱是因为列宽计算错误导致的（例如，列宽总和超出容器宽度），请确保列的宽度设置合理（使用百分比或min-width），或者全部不设置列宽让表格自动分配。 ### 补充：关于引用中提到的高度问题 虽然用户的问题是列顺序不对，但引用中提到了高度问题（引用[2][4]）。如果同时存在高度问题，可以结合以下方法： - 使用固定高度（如果可行） - 使用flex布局（引用[4]的方法） 在样式上可以添加： ```css .el-tab-pane { display: flex; flex-direction: column; height: 100%; } .el-table { flex: 1; } ``` 这样表格可以自适应高度，同时避免高度计算错误导致的布局问题。 ### 总结 针对el-tabs导致el-table列顺序不对的问题，主要采用两种方法： 1. 使用lazy延迟加载避免隐藏tab的表格初始化错误。 2. 在tab切换后调用表格的doLayout方法重新计算布局。 同时注意检查列宽设置是否合理，避免因宽度不足导致的顺序错乱。 §§相关问题§§ 1. 如何解决el-tabs中el-table高度自适应问题？ 2. el-table的doLayout方法有什么作用？ 3. element-ui中el-tabs的lazy属性是如何工作的？ 4. 如何避免el-table列宽计算错误导致的布局问题？ </think>基于提供的引用信息和常见解决方案，针对 **el-tabs导致el-table列顺序错乱** 的问题，以下是根本原因和解决方法： --- ### 🔍 问题根本原因 1. **初始渲染时机冲突** `el-tabs` 默认会一次性加载所有标签页内容（即使未激活），而 `el-table` 在隐藏状态下初始化时，会因为容器宽度计算错误（宽度为0）导致列顺序错乱[^1][^2]。 2. **列宽计算失效** 当 `el-table` 嵌套在 `el-tabs` 的非激活标签页中时，表格的 `auto-resize` 功能无法正确计算列宽和顺序（容器尺寸为0）[^2][^3]。 3. **CSS样式冲突** `el-tabs` 的自适应高度机制与 `el-table` 的自动布局冲突，影响表格的渲染逻辑[^2][^4]。 --- ### ✅ 解决方案 #### 方法一：延迟加载非激活标签页（推荐） 通过 `v-if` 或 `lazy` 属性确保仅渲染当前激活的标签页内容： ```vue <el-tabs v-model="activeTab"> <el-tab-pane label="Tab1" name="tab1"> <!-- v-if 确保仅渲染激活页 --> <el-table v-if="activeTab === 'tab1'" :data="tableData1"></el-table> </el-tab-pane> <el-tab-pane label="Tab2" name="tab2"> <el-table v-if="activeTab === 'tab2'" :data="tableData2"></el-table> </el-tab-pane> </el-tabs> ``` **优点**：从根本上避免隐藏标签页的表格初始化异常。 #### 方法二：手动触发表格重绘 在切换标签页时，强制 `el-table` 重新计算布局： ```vue <script> export default { methods: { handleTabClick(tab) { this.$nextTick(() => { // 通过 ref 调用表格的 doLayout 方法 this.$refs[`table_${tab.name}`].doLayout(); }); } } } </script> ``` #### 方法三：统一列宽策略 避免混合使用固定列宽和自适应列宽（如同时使用 `width="120"` 和不设宽度的列）[^3]： ```vue <!-- 方案1：全部使用百分比 --> <el-table-column prop="name" label="名称" width="20%"></el-table-column> <!-- 方案2：全部不设宽度（完全自适应） --> <el-table-column prop="date" label="日期"></el-table-column> ``` #### 方法四：添加CSS强制样式 修复容器尺寸计算问题[^4]： ```css /* 确保表格容器撑满父元素 */ .el-tab-pane { display: flex; flex-direction: column; height: 100%; } .el-table { flex: 1; width: 100% !important; } ``` --- ### ️ 注意事项 1. **避免混合列宽设置**：手动设置列宽时，确保所有列都明确指定宽度（建议用百分比），或全部不设置[^3]。 2. **减少动态列**：频繁变更 `el-table-column` 会导致重绘问题，优先使用静态列定义。 3. **升级版本**：若使用较旧的 Element-UI 版本（如 `<2.15.x`），建议升级至最新版修复已知 Bug。 > 实测推荐组合：**方法一（延迟加载） + 方法三（统一列宽）**，可彻底解决列顺序问题[^1][^2][^3]。
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值