Element-ui中阻止折叠面板自定义title中的默认点击事件

        我们在使用折叠面板中title部分自定义组件时，比如在title中添加了其他的组件（我的是时间选择器，以及单选框），会频繁地触发折叠面板的展开事件，解决此问题只需要在template标签下再包一层div标签，在此div标签中添加停止冒泡事件的函数即可：

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部分：

  methods: {

    stopBubbling(event) {
      event.stopPropagation();//阻止事件冒泡
    },

  },