首先,效果是点击添加折叠面板,折叠面板的title右侧是关闭的小按钮,每次添加的面板都自动展开,其他的面板自动关闭,但其中发现一个问题是,每次点击关闭的时候,虽然上一个面板被关闭了,但他的下一个会自动打开,想把这个问题解决就发现是冒泡时间,当点击的时候会冒泡,误以为是点击展开,所以vue里边有个阻止冒泡事件,使用

@click.stop="close(item,index)"
 <el-collapse accordion>
<el-collapse-item v-for="(item,index) in collapseData" :key="index">
<template slot="title">
{{item.name}}
<i class="ssf ssf-colse" @click.stop="close(item,index)"></i>
<!-- 因为项目需要要在每个折叠面板右侧添加关闭按钮,这样用定位放在右侧即可 -->
</template>
<div>{{item.content}}</div>
</el-collapse-item>
</el-collapse>

for循环使用element的折叠面板遇到的问题-1的更多相关文章

  1. for循环使用element的折叠面板遇到的问题-2

    需求:每次添加一个折叠面板时,让最新的折叠面板展开,其余的关闭 动态控制展开折叠面板,首先绑定name,v-model = activeName 我们的项目中是当添加折叠面板时,直接push进这个数组 ...

  2. for循环使用element的折叠面板遇到的问题-3

    需求:for循环渲染上去的表单怎么使用element的表单校验 之前做这个的时候,死活绑不上去,不知道哪里出了问题,后来解决办法是prop要注意用拼接,使它和索引的变量一致 <el-form-i ...

  3. antd vue 折叠面板 v-for 循环点击无效

    问题描述 实现一个折叠面板点击展开,但是必须点击两次才能展开,第一次无效 <a-collapse-panel v-for="(item, index) in dataMap" ...

  4. vue+element ui项目总结点(五)Carousel 走马灯组件、Collapse 折叠面板、Tree 树形控件

    <template> <div class="ele_test_box"> <!-- 常用效果 Popover 弹出框组件 具体属性查看官方文档--& ...

  5. layui中折叠面板的使用

    运用折叠面板后 可以让页面更加整洁 有什么不懂的可以留言 代码放到底部 需要引入的文件 JQuery代码: html代码 <div class="layui-colla-item&qu ...

  6. Jquery Accordion 折叠面板

    属性 类型 默认值 active Boolean/Number/jQuery/Selector/Element 第一个面板 设定默认显示的面板.设置为 false 时默认不显示面板,需 collaps ...

  7. (八)easyUI之Accordion折叠面板:动态面板

    二.动态面板 数据库设计 函数设计:该函数用于获取某个节点的所有子节点 CREATE FUNCTION fn_getAddress_ChildList_test(rootId INT) RETURNS ...

  8. amazeui折叠面板智能化展开

    2016年12月12日 21:05:18 星期一 场景: 我拿这个组件用作管理后台的侧边栏 效果: 根据当前访问的url不同, 展开不同的面板 amazeui折叠面板 js代码: <script ...

  9. jquery ui 常用(一)(自动完成 | 标签页 | 折叠面板 | 带图标的按钮 | 日期选择器| )

    条件,引用3个文件 jquery-ui.min.css; jquery.min.js; jquery-ui.min.js. 一.自动完成 http://www.w3cschool.cc/jqueryu ...

随机推荐

  1. FastJson中JSONString与各个对象的的转换关系及API示例

    前言 JSON作为一种轻量级的数据交换格式,在我们日常的开发中使用十分广泛,就Java后端的开发工作中,JSON字符串与Java对象之间相互转换是常常遇到的操作. 虽然平时用到的挺多的,但是因为用于J ...

  2. 在 Spring Boot 项目中使用 activiti

    新建springBoot项目时勾选activiti,或者在已建立的springBoot项目添加以下依赖: <dependency> <groupId>org.activiti& ...

  3. QT--TCP网络编程(客户端/服务器)

    QT -----TCP网络编程   1.主要流程 1.客户端 创建QTcpSocket对象 连接到服务器 --connectToHost() 发送数据 ---write() 读取数据 ---readA ...

  4. 阿里云esc 安装 mysql8.0

    打开 连接工具,我用的是 MobaXterm_Personal_12.1 (官网下载地址:https://moba.en.softonic.com/) 连接到 ecs,然后移除 默认的 mariadb ...

  5. .NET Core 使用HMAC算法

    一. HMAC 简介 通过哈希算法,我们可以验证一段数据是否有效,方法就是对比该数据的哈希值,例如,判断用户口令是否正确,我们用保存在数据库中的password_md5对比计算md5(password ...

  6. 8道Python基础面试练习题

    1.26个字母大小写成对打印,例如:Aa,Bb...... for i in range(26): print(chr(65+i)+chr(97+i)) 2.一个list包含10个数字,然后生成一个新 ...

  7. Linux(三)

    1.用户与用户组        Linux系统是一个多用户.多任务的操作系统,任何一个要使用系统资源的用户,都必须首先向系统管理员(root)申请一个账号,然后以这个账号的身份进入系统.       ...

  8. Filter Lookup Editor Data Source 筛选器查找编辑器数据源

    In this lesson, you will learn how to filter the data displayed by a lookup editor. This editor is s ...

  9. Java内存区域与内存溢出异常,对象的创建

    一.运行时数据区域 Java程序的执行流程:首先 .java源代码文件会被Java编译器编译为字节码文件(.class后缀),然后由JVM中的类加载器加载各个类的字节码文件,加载完毕之后,交由JVM执 ...

  10. 《Python3 网络爬虫开发实战》学习资料

    <Python3 网络爬虫开发实战> 学习资料 百度网盘:https://pan.baidu.com/s/1PisddjC9e60TXlCFMgVjrQ