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>