需求:在折叠面板的标题前面加上复选框,可以选中当前数据

问题:点击复选框时,折叠面板会展开又折叠
解决:设置复选框的点击的事件冒泡,注意不是设置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
复选框与折叠面板交互修复
博客内容讲述了在前端开发中遇到的问题,即在折叠面板的标题前添加复选框后,点击复选框会导致折叠面板展开和折叠。通过阻止事件冒泡,使用@click.stop.native来修复这一问题,确保点击复选框时只执行选中状态的改变,而不会影响到折叠面板的状态。代码示例展示了如何在Vue.js中实现这一解决方案。
1269

被折叠的 条评论
为什么被折叠?



