首先,效果是点击添加折叠面板,折叠面板的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. python 多线程编程之使用进程和全局解释器锁GIL

    本文主要介绍如何在python中使用线程. 全局解释器锁: python代码的执行是由python虚拟机(又名解释器主循环)进行控制的.python中,主循环中同时只能有一个控制线程在执行,就像单核C ...

  2. 如何正确使用 Spring Cloud?【上】

    如何更快地交付软件,每周.每天甚至每个小时向用户发布新特性?如何让新员工在入职后就能部署代码?在如此快的节奏下如何保证质量?快,我们应用开发面临的主要挑战,交付越快就越能紧密地收集到用户反馈,从而更有 ...

  3. [洛谷P1967][题解]货车运输

    题目 这道题让我们求最小限重的最大值 显然可以先求出最大生成树,然后在树上进行操作 因为如果两点之间有多条路径的话一定会走最大的,而其他小的路径是不会被走的 然后考虑求最小权值 可以采用倍增求LCA, ...

  4. C++ std::deque 基本用法

    #include <iostream> #include <string> #include <deque> // https://zh.cppreference. ...

  5. asp.net core 3.0 选项模式1:使用

    本篇只是从应用角度来说明asp.net core的选项模式,下一篇会从源码来分析 1.以前的方式 以前我们使用web.config/app.config时是这样使用配置的 var count = Co ...

  6. 阿里云服务器搭建web项目小结

    前言 最近恰好有时间,自己搞了个云服务器试着搭建了个网站,遇到了一些问题,通过踩坑也涨了一些经验,遂记录一二,与后来者分享. 正文 1.博主用的阿里云服务器,为什么用它呢?一个是恰逢双十一,有优惠:另 ...

  7. tomcat的jsp页面超过65535,导致500报错

    错误信息 org.apache.jasper.JasperException: Unable to compile class for JSP: An error occurred at line: ...

  8. 《Dotnet9》系列之建站-Dotnet9建站20天感悟

    本人站点 https://dotnet9.com,建站20天了,在这给站长朋友讲述个人建站经历,希望对大家能有所帮助. https://dotnet9.com 网站采用 宝塔 + WordPress ...

  9. 构建Electron的常见问题(Mac)

    背景 起因是产品的需求,需要更换Electron为底层平台,但因为会有不少定制化的功能要实现,必须自己实现此类内容,所以也就导致必须自己编译Electron的源代码. 整个构建过程,看Electron ...

  10. 拥抱自动化,CODING 2.0 持续集成全新上线

    在文章开始前,做一个小调查,在您的软件项目中集成一行新代码平均需要花多长时间? 15 分钟 一小时 半天 一天及以上 注意这里的集成是指将源码放在一起,并验证源码可以作为一个一致.运行可靠的软件的过程 ...