zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    Wazuh配置电子邮件警报(SMTP)
    kafka 分区重新分配脚本
    shell并发及控制并发数
    python2和python3使用pyhive
    k8s1.17安装gitlab
    nginx ssl证书 BEGIN PRIVATE KEY 转换为BEGIN RSA PRIVATE KEY
    Datax:阿里云hbase数据导入到自建hbase集群
    python3连接impala(centos7)
    Effective Java2读书笔记-类和接口(五)
    Effective Java2读书笔记-类和接口(四)
  • 原文地址:https://www.cnblogs.com/stella1024/p/12400925.html
Copyright © 2011-2022 走看看