我们在使用折叠面板中title部分自定义组件时，比如在title中添加了其他的组件（我的是时间选择器，以及单选框），会频繁地触发折叠面板的展开事件，解决此问题只需要在template标签下再包一层div标签，在此div标签中添加停止冒泡事件的函数即可：
html部分：文章来源：https://www.toymoban.com/news/detail-509125.html
<el-collapse-item>
<template slot="title">
//就是在这里用一个div标签包裹title内的自定义组件，再使用点击事件click.stop默认修饰符，stopBubbling
<div @click.stop="stopBubbling">
<div class="visitor_status_title">
<h3 class="visitor_status_text">筛选</h3>
<span class="icon_text">高级搜索</span>
</div>
<div class="filter_radio">
<div>
<span class="radio_text_time public">时间</span>
<el-radio-group v-model="FilterRadio1">
<el-radio-button label="今日"></el-radio-button>
<el-radio-button label="昨日"></el-radio-button>
<el-radio-button label="前日"></el-radio-button>
</el-radio-group>
<el-date-picker
class="select_data"
v-model="SelectDate"
type="date"
placeholder="选择日期"
>
</el-date-picker>
</div>
<div>
<span class="radio_text_equipment public">设备</span>
<el-radio-group v-model="FilterRadio2">
<el-radio-button label="全部"></el-radio-button>
<el-radio-button label="电脑端"></el-radio-button>
<el-radio-button label="移动端"></el-radio-button>
</el-radio-group>
</div>
</div>
</div>
</template>
</el-collapse-item>js部分：文章来源地址https://www.toymoban.com/news/detail-509125.html
methods: {
stopBubbling(event) {
event.stopPropagation();//阻止事件冒泡
},
},到了这里，关于Element-ui中阻止折叠面板自定义title中的默认点击事件的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
