我们在使用折叠面板中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();//阻止事件冒泡
    },

  },

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐