for循环使用element的折叠面板遇到的问题-2
需求:每次添加一个折叠面板时,让最新的折叠面板展开,其余的关闭
动态控制展开折叠面板,首先绑定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的更多相关文章
- for循环使用element的折叠面板遇到的问题-1
首先,效果是点击添加折叠面板,折叠面板的title右侧是关闭的小按钮,每次添加的面板都自动展开,其他的面板自动关闭,但其中发现一个问题是,每次点击关闭的时候,虽然上一个面板被关闭了,但他的下一个会自动 ...
- for循环使用element的折叠面板遇到的问题-3
需求:for循环渲染上去的表单怎么使用element的表单校验 之前做这个的时候,死活绑不上去,不知道哪里出了问题,后来解决办法是prop要注意用拼接,使它和索引的变量一致 <el-form-i ...
- antd vue 折叠面板 v-for 循环点击无效
问题描述 实现一个折叠面板点击展开,但是必须点击两次才能展开,第一次无效 <a-collapse-panel v-for="(item, index) in dataMap" ...
- vue+element ui项目总结点(五)Carousel 走马灯组件、Collapse 折叠面板、Tree 树形控件
<template> <div class="ele_test_box"> <!-- 常用效果 Popover 弹出框组件 具体属性查看官方文档--& ...
- layui中折叠面板的使用
运用折叠面板后 可以让页面更加整洁 有什么不懂的可以留言 代码放到底部 需要引入的文件 JQuery代码: html代码 <div class="layui-colla-item&qu ...
- Jquery Accordion 折叠面板
属性 类型 默认值 active Boolean/Number/jQuery/Selector/Element 第一个面板 设定默认显示的面板.设置为 false 时默认不显示面板,需 collaps ...
- (八)easyUI之Accordion折叠面板:动态面板
二.动态面板 数据库设计 函数设计:该函数用于获取某个节点的所有子节点 CREATE FUNCTION fn_getAddress_ChildList_test(rootId INT) RETURNS ...
- amazeui折叠面板智能化展开
2016年12月12日 21:05:18 星期一 场景: 我拿这个组件用作管理后台的侧边栏 效果: 根据当前访问的url不同, 展开不同的面板 amazeui折叠面板 js代码: <script ...
- jquery ui 常用(一)(自动完成 | 标签页 | 折叠面板 | 带图标的按钮 | 日期选择器| )
条件,引用3个文件 jquery-ui.min.css; jquery.min.js; jquery-ui.min.js. 一.自动完成 http://www.w3cschool.cc/jqueryu ...
随机推荐
- js简单动画:匀速动画、缓动动画、多物体动画以及透明度动画
主要实现以下几种简单的动画效果(其实原理基本相同): 1.匀速动画:物体的速度固定 2.缓动动画:物体速度逐渐变慢 3.多物体动画 4.透明度动画 效果实现: 1.匀速动画(以物体左右匀速运动为例) ...
- Android 数据库 SQLiteOpenHelper
public class DbOpenHelper extends SQLiteOpenHelper { private static String name = "test.db" ...
- 阿里云esc 安装 mysql8.0
打开 连接工具,我用的是 MobaXterm_Personal_12.1 (官网下载地址:https://moba.en.softonic.com/) 连接到 ecs,然后移除 默认的 mariadb ...
- delete误删数据使用SCN恢复
参考51CTO博客 问题描述:使用scn号恢复误删数据 1.查询系统闪回的scn值以及当前日志的scn值,因为我这个是测试,创建的表是在在后边,所以scn值要大于下边这两个scn值,所以对我恢复数据没 ...
- VMware 虚拟机黑屏问题
VMware Workstation 14打开虚拟机黑屏解决方法 听语音 浏览:0 | 更新:2017-11-21 16:56 | 标签:操作系统 虚拟机 VMWARE 1 2 3 4 分步阅读 最近 ...
- 基于XML的开发
基于XML的开发 1.定义一个切面类 /** * Created by zejian on 2017/2/20.*/ public class MyAspectXML { public void be ...
- Java面试官:兄弟,你确定double精度比float低吗?
我有一个朋友,叫老刘,戴着度数比我还高的近视镜,显得格外的"程序员":穿着也非常"不拘一格",上半身是衬衣西服,下半身是牛仔裤运动鞋. 我和老刘的感情非常好,每 ...
- Prometheus学习系列(三)之Prometheus 概念:数据模型、metric类型、任务、实例
前言 本文来自Prometheus官网手册1.Prometheus官网手册2 和 Prometheus简介 说明 Prometheus从根本上存储的所有数据都是时间序列: 具有时间戳的数据流只属于单个 ...
- C#使用Linq to csv读取.csv文件数据
前言:今日遇到了一个需要读取CSV文件类型的EXCEL文档数据的问题,原本使用NPOI的解决方案直接读取文档数据,最后失败了,主要是文件的类型版本等信息不兼容导致.其他同事有使用linq to csv ...
- [springMvc]常见配置
[springMvc]常见配置 <?xml version="1.0" encoding="UTF-8"?> <beans xmlns=&qu ...