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>
原文地址:https://www.cnblogs.com/stella1024/p/12400925.html