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

一、问题

实现的代码如下所示：

<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>
1
2
3
4
5
6
7
8
9

function addOptions() {
  console.log('addOptions')
}
1
2
3

布局实现是使用el-form-item里的slot为label来设置头部，实现form-item的上下布局自定义label内容

点击【新增选项】按钮，下面会一直新增列表项

需要圈红的B区域触发新增选项的操作，圈红的A区域不需要有新增选项的操作。但是始终点击圈红的A区域还是会触发新增选项的操作

二、尝试解决

1、click修饰符

给el-button的click使用阻止冒泡等修饰符，问题仍然存在

<el-button icon="el-icon-plus" type="text" size="mini" @click.stop="addOptions">新增选项</el-button>
<!--或者--->
<el-button icon="el-icon-plus" type="text" size="mini" @click.prevent="addOptions">新增选项</el-button>
1
2
3

2、event回调阻止

click响应回调事件中阻止冒泡等，问题仍然存在

function addOptions(e) {
  e.preventDefault();
  e.stopPropagation();
}
1
2
3
4

三、总结

最终还是放弃了使用el-form-item的写法，直接使用div来布局。

如果有大佬们有高见，帮忙回复下，不胜感激！！！

四、感谢

有大佬解惑啦~~~

<template>
    <el-form label-position="top">
      <el-form-item label="选项设置">
        <div slot="label" @click="addOptions($event)">
          <span>选项设置</span>
          <el-button id="addType" icon="el-icon-plus" type="text" size="mini">新增选项</el-button>
        </div>
        <!--列表内容--->
      </el-form-item>
    </el-form>
</template>
<script>
export default {
    methods: {
        addOptions(e) {
            e.preventDefault()
            try {
                if (e.target?.id == 'addType' || e.target.innerText == '新增选项' || e.target.className == 'el-icon-plus') {
                  console.log(e.target, '点击了新增按钮！', e)
                } else {
                  // console.log(e.target, '点击了', e)
                }
              } catch (error) {}
        }
    }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

其实，我总觉得这种情况是不是element-ui的一个bug，还是说他们就是特地这么处理的，感觉得研究下源码

五、最后

本人每篇文章都是一字一句码出来，希望对大家有所帮助，多提提意见。顺手来个三连击，点赞