vue+view中的折叠面板点击表头阻止面板的收缩事件
在折叠面板的表头添加了一个删除按钮,但是点击的时候会同时触发收缩事件和删除事件,要求点击删除的时候阻止收缩事件:

解决方案:使用iview的按钮组件(因为native不能绑定原生标签),添加v-on:click.native.stop可以组件折叠面板的收缩事件,并正常触发删除事件
<!-- 折叠面板 -->
<Collapse class="ivu-collapse-unit" v-model="collapseVal" accordion>
<Panel :name="indexs+''" v-for="(items,indexs) in targetList" :key="indexs">
<Row class="lh-48-r">
<Col span="16" >
<h5 class="w-100p fsz-18-r fw-bold">
{{ items.enName || "-" }}
</h5>
</Col>
<Col span="8" align="right" >
<div class="fsz-18-r">
<a class="delete-btn-unit lh-28-r-i mr-12-r" @click="targetDeleteFun(indexs)">删除</a> // 原生按钮点击删除事件会触发折叠面板的收缩事件
<Button class="ivu-btn-unit min-btn mr-12-r" type="error" v-on:click.native.stop='targetDeleteFun(indexs)'>删除</Button> // iview按钮组件,添加v-on:click.native.stop可以组件折叠面板的收缩事件,并正常触发删除事件
<span class="main-line mr-50-r"></span>
</div>
</Col>
</Row>
<div slot="content" class="p-24-r">
<table class="table-unit lh-48-r mb-24-r">
<tr>
<th align="right" class="w-248-r pr-16-r bg-col-a-2-1">负责人</th>
<td align="left" class="pl-16-r">
{{ items.userName || "-" }}
</td>
<th align="right" class="w-248-r pr-16-r bg-col-a-2-1">联系方式</th>
<td align="left" class="pl-16-r">
{{ items.phoneNumber || "-" }}
</td>
</tr>
</table>
</div>
</Panel>
</Collapse>

浙公网安备 33010602011771号