需求:在折叠面板的标题前面加上复选框,可以选中当前数据
问题:点击复选框时,折叠面板会展开又折叠
解决:设置复选框的点击的事件冒泡,注意不是设置change事件的事件冒泡@click.stop.native="()=>{}"
<el-collapse-item
:title="item.settingName"
v-for="item in list"
:key="item.settingId"
>
<template slot="title">
<el-checkbox
label=" "
@change="(e)=>{handleSelectionChange(e, item.id)}"
@click.stop.native="()=>{}"
:checked="multipleSelection.includes(item.id)"
>
</el-checkbox>
{{ item.settingName }}
</template>
<div>内容</div>
</el-collapse-item>
这里定义了一个点击事件(无执行语句),并为事件增加了阻止冒泡指令.stop ,由于el-checkbox是组件不是标签,需要在.stop后面加上.native