element中el-form-item的slot为label设置el-button的click事件会冒泡到整个label

小马甲丫

已于 2024-02-27 09:46:48 修改

阅读量3k

点赞数 2

分类专栏： # vue # element 文章标签： vue.js javascript 前端 elementui

于 2023-10-09 08:30:00 首次发布

本文链接：https://blog.csdn.net/u012804440/article/details/133684599

版权

在 Vue.js 的 Element UI 框架中，当在 el-form-item 的 label slot 中设置 el-button 并绑定 click 事件时，发现点击按钮会冒泡到整个 label 区域，导致不期望的行为。尝试了阻止事件冒泡的修饰符和回调阻止方法，但问题未得到解决。最终改为使用 div 布局来规避此问题。如果你有解决这个问题的高见，欢迎分享。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

一、问题
二、尝试解决
- 1、`click`修饰符
- 2、`event`回调阻止
三、总结
四、感谢
五、最后

一、问题

Alt

实现的代码如下所示：

<el-form label-position="top">
  <el-form-item label="选项设置">
    <div slot="label">
      <span>选项设置</span>
      <el-button icon="el-icon-plus" type="text" size="mini" @click="addOptions">新增选项</el-button>
    </div>
    <!--列表内容--->
  </el-form-item>
</el-form>

function addOptions() {
   
  console.log

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

小马甲丫

关注关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
10
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
打赏
打赏
打赏举报

举报

专栏目录

【vue+slot】自定义el-form-item的label内容和样式

栀妹儿的炼丹炉

03-24

7733

slot插槽用来自定义el-form-item的label内容：（以此引申所有带属性的组件） slot写法： <el-form :model="form" label-width="120px" label-position="top" :inline="true">  <el-form-item prop="title"> <span slot="la

Vue + elementUI使用中总结，包括踩坑（更新中）

是日前端

11-11

2766

<el-table-column prop="reportName" label="报告名称"> <template slot-scope="scope"> <el-input v-model="scope.row.reportName" @blur="confirmData" clearable></el-input> </tem

10 条评论您还未登录，请先登录后发表或查看评论

Vue组件化实战

天暮雨的博客

11-07

538

介绍本文目的是对Vue组件化内容在网课学习的总结和复习。多有不足之处，请多多交流。承接上文(Vue组件化总结)，学习了Vue组件化原理，自然是要来一波实战练习的。在网课上面，老师以element-ui的form表单为蓝本，从0 到1的讲述了如何自行设计一个表单组件。其内容包含输入框组件、表单项组件、表单组件以及简单的表单数据校验功能。组件基础实现输入框组件 el-input分析先看下el-input组件的使用方式，再进行分析 <el-input v-model="input" placeho

element-plus组件库改造【2】 el-form表单点击label标签，触发表单控件响应

github_74887499的博客

02-07

584

实现点击el-form-item上的label标签，表单控件不进行响应

element-plus中阻止el-form-item点击label也触发表单控件的事件

Juihui822的博客

08-06

864

如图：想要点击车型和编号时，不触发点击事件，在样式中加如下代码：

【Element】el-form-item 下 slot="label" 使用 el-tooltip 不显示的问题

日常问题bug解决、学习分享、个人杂谈等等随便写写哈哈哈

06-10

1565

问题描述 el-form-item 使用 label 插槽放入 el-tooltip 不显示(未使用 label-width 和 label-action 属性的情况下)。解决方法将标签的样式修改，去掉浮动。成功！！！ ...

对el-form-item使用slot进行某个字的超链接页面跳转

weixin_43914278的博客

04-11

2416

核心功能需要实现"构"字可跳转到登录页面，核心方法使用插槽实现 <el-form-item> <div slot="label"> <span>机</span> <span @click="$router.push({ name: 'login' })">构</span> <span>名称</span>

表单el-form-item自定义label

weixin_52862941的博客

12-02

2112

核心用的是 slot='label'

elementui el-form中el-form-item自定义label

最新发布

02-28

### 如何正确设置 `el-form-item` 的 `label` 属性 #### 使用默认 `label` Element UI 提供了一个简单的属性用于配置表单项标签，即通过 `label` 属性直接指定文字描述。这种方式适用于大多数场景下的简单文本显示...

Element-ui进阶事件处理：多选组件中的4个高级技巧

Element-ui的多选组件是前端开发中常用的功能，它允许用户从多个选项中进行选择，常用于表单验证、数据展示和复杂的用户交互流程。本文首先概述了多选组件的基本概念，接着深入探讨了其基础和高级事件处理技巧，如...

element:常见用法总结（前后台常见问题与自定义表单验证）

tomorrownan的博客

09-11

1707

后台给的状态是使用12345状态码表示的，前端要把它转成对应的状态文字。这里使用element-ui的table为例，代码如下： <el-table-column label="审核结果" align="center"> <template slot-scope="scope"> <span v-if="scope.row.authStatus === ...

＜el-form＞的＜el-form-item＞使用自定义label 插槽

诸事顺利

04-28

9657

<el-form>的<el-form-item>使用自定义label 插槽不需要自定义自定义label —— [插槽](https://cn.vuejs.org/v2/guide/components-slots.html)其他不需要自定义 <el-form ref="ruleForm" label-width="100"> <el-form-item label="工作说明"> <el-input type="textarea" v-mo

el-form-item表单label添加提示图标

小马甲

10-08

4560

element-ui中el-form在编辑表单时，经常会在label添加一些需要提示的东西，可以用到Form-Item 的slot这个方法。

Element Plus 取消el-form-item点击触发组件，改为原生表单控件

zhujiyan666的博客

09-13

845

【代码】Element Plus 取消el-form-item点击触发组件，改为原生表单控件。

element-plus表单为什么点击label标签，表单控件也会响应

xiaomaerc的博客

03-27

1451

label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。若想点击label标签，表单控件不进行响应，可在使用FormItem的for属性进行修改label标签原生的for属性。这是因为label标签的“for”属性表单控件“id”绑定了相同的值。

Vue+ElementUI 将表单做成组件公用，添加slot方法便于外部添加其他

weixin_45701630的博客

08-15

3995

整体思路：子组件中正常创建表单，父组件调用时，在插槽中添加el-form-item，将所有的v-model统一存在一个对象中，通过props传递给子组件，在每个item中写好rules，在各个控件中写入:validate-event="false"（因为在表单验证的时候会有些问题出现，所以这里采用统一的点击按钮后进行验证），最后在子组件即将提交表单时将数据合并，完成验证后传给后台。多个界面内容展示类似，都需要提交相同的表单，为方便之后的需求变更，通过插槽可以添加新的表单项。...

element 设置el-form-item时自定义label

栗子的博客

02-21

1715

vue+element 设置el-form-item时自定义label

elementui 表单 el-form 的那些使用小技巧

qq_43477721的博客

04-08

5029

去掉原先 el-form-item 上的 label，使用 slot= label 自定义即可。 <el-form-item prop="任务名称" required> <span slot="label"> <i class="el-icon-connection"></i> <span style="color: #46a0fc;"> 任务名称 </span> </span> </el-fo