需求:每次添加一个折叠面板时,让最新的折叠面板展开,其余的关闭

动态控制展开折叠面板,首先绑定name,v-model = activeName

我们的项目中是当添加折叠面板时,直接push进这个数组collapseData,循环这个数组新建折叠面板


<el-collapse accordion v-model="activeName">
      <el-collapse-item v-for="(item,index) in collapseData" :key="index" :name="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>

需求是点击新建的时候,最新建的折叠面板展开,其余的折叠面板关闭,就需要用到activeName这个变量,当绑定的name等于activeName时即可

 methods: {
add() {
this.collapseData.push({
name: "王",
checked: false
});
this.activeName = Number(this.collapseData.length) - 1; //每次的activeName都等于数组的最大的值
}
}

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

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

    首先,效果是点击添加折叠面板,折叠面板的title右侧是关闭的小按钮,每次添加的面板都自动展开,其他的面板自动关闭,但其中发现一个问题是,每次点击关闭的时候,虽然上一个面板被关闭了,但他的下一个会自动 ...

  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. NLP标注工具brat 配置文件说明

    快速搭建brat 通过docker: docker run --name=brat -d -p 38080:80 -e BRAT_USERNAME=brat -e BRAT_PASSWORD=brat ...

  2. [ASP.NET Core 3框架揭秘] 跨平台开发体验: Windows [下篇]

    由于ASP.NET Core框架在本质上就是由服务器和中间件构建的消息处理管道,所以在它上面构建的应用开发框架都是建立在某种类型的中间件上,整个ASP.NET Core MVC开发框架就是建立在用来实 ...

  3. com.android.tools.aapt2.Aapt2Exception: AAPT2 error: check logs for details

    1.错误显示 com.android.tools.aapt2.Aapt2Exception: AAPT2 error: check logs for details log提示:Generate Si ...

  4. day06数组、数组声明和赋值、数组复制、数组排序

    复习 1.do-while 1)语法 do{ //循环体 }while(<条件>); 2.while和do-while 1)while 先判断,后执行 初始条件不满足,一次都不执行 2)d ...

  5. Java连载59-局部内部类、匿名内部类

    一.局部内部类 1.局部内部类等同于局部变量 2.局部内部类在访问局部变量的时候,局部变量必须使用final修饰. 3.举个例子: package com.bjpowernode.java_learn ...

  6. Newifi-mini OpenWrt 下 EAP-PEAP,EAP-TLS 企业级无线认证及 FreeRadius3

    Newifi-mini OpenWrt 下 EAP-PEAP,EAP-TLS 企业级无线认证及 FreeRadius3 转载注明来源: 本文链接 来自osnosn的博客,写于 2019-07-15. ...

  7. 【重要更新】Senparc.Weixin SDK v6.5 升级说明(支持 .NET Core 3.0 及分布式消息上下文)

    Senparc.Weixin SDK v6.5 开始支持 .NET Core 3.0,并将微信消息上下文进行了大幅度的重构,支持了使用分布式缓存存储上下文信息,这意味着在分布式系统中,现在 Senpa ...

  8. Linux(一)

    1.简单命令        1.1 ls指令         语法1:#ls  [路径]               表示列出指定路径下的文件夹和文件的名字,如果路径没有指定则列出当前路径下的(lis ...

  9. 理解ES6的新数据类型:Symbol

    ES6之前的数组类型 在ES6之前JS只有6种数据类型,分别是:Undefined.Null.布尔值(Boolean).字符串(String).数值(Number).对象(Object). ES6引入 ...

  10. katalon Studio之WebUi自动化测试视频教程持续更新

    通知...通知...通知... 为了更好的把katalon Studio自动化测试工具推广给大家,最近在B站中开通了视频专栏,地址如下: https://www.bilibili.com/video/ ...