<van-list
v-model="loading"
:finished="finished"
finished-text="没有更多了"
@load="onLoad"
:offset="10"
:immediate-check="false"
> <div class="comp" v-for="(item,index) in tabledata" :class="activeClass===index?'':'comp-active'">
<div class="cell"><span>组件名称:</span>{{item.component}}</div>
<div class="cell"><span>实例名称:</span>{{item.instance_name}}</div>
<div class="cell"><span>实例IP:</span>{{item.ip}}</div>
<div class="cell"><span>实例端口:</span>{{item.port}}</div> <div class="cell expand" @click="isActive(index)" v-show="activeClass!==index">
<span style="float: left">...</span>
<van-icon name="arrow-down"/>
</div> <div class="cell"><span>远程启停:</span>
<van-tag type="success" v-if="item.is_container">开启</van-tag>
<van-tag type="danger" v-else>关闭</van-tag>
</div>
<div class="cell"><span>启停脚本:</span>{{item.script}}</div>
<div class="cell"><span>日志路径:</span>{{item.logpath}}</div>
<div class="cell expand" @click="activeClass=-1">
<van-icon name="arrow-up"/>
</div>
</div> </van-list>
 data() {
return {
activeClass: -1,// 0为默认选择第一个,-1为不选择
}
},
methods: {
isActive(index){
this.activeClass = index;
},

vant+vue控制列表展开的更多相关文章

  1. 035——VUE中表单控件处理之使用vue控制select操作文字栏目列表

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. vue 二级列表折叠面板

    请求出来的数据是二级列表,需要点击一级列表展开相应的二级列表 data(){ return { info: [ {name:'一级菜单1',lists:[{price:1},{price:2}]}, ...

  3. 手势识别官方教程(8)拦截触摸事件,得到触摸的属性如速度,距离等,控制view展开

    onInterceptTouchEvent可在onTouchEvent()前拦截触摸事件, ViewConfiguration得到触摸的属性如速度,距离等, TouchDelegate控制view展开 ...

  4. CSS控制列表样式属性list-style有哪些?怎么用?

    CSS列表样式属性list-style有哪些类型?不同类型CSS控制列表样式使用时该注意什么? 这是W3Cschool用户Shirley于2016-11-10在W3Cschool编程问答提出的问题.云 ...

  5. 034——VUE中表单控件处理之使用vue控制radio表单的实例操作

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. 031——VUE中表单控件处理之使用vue控制input和textarea表单项

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. 013——VUE中多种方式使用VUE控制style样式属性

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  8. Phalcon 訪问控制列表 ACL(Access Control Lists ACL)

    Phalcon在权限方面通过 Phalcon\Acl 提供了一个轻量级的 ACL(訪问控制列表). Access Control Lists (ACL) 同意系统对用户的訪问权限进行控制,比方同意訪问 ...

  9. ORA-24247: 网络訪问被訪问控制列表 (ACL) 拒绝

     ORA-24247: 网络訪问被訪问控制列表 (ACL) 拒绝 注意:须要在system用户下使用命令 须要先使用 DBMS_NETWORK_ACL_ADMIN.CREATE_ACL 创建訪问控 ...

  10. Vue 基本列表 && 数据过滤与排序

    1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8" /> 5 & ...

随机推荐

  1. Docker 导出容器 / 镜像

    有时由于镜像大小.网络限制等原因,我们不能将本地制作的容器 / 镜像上传到公共容器注册表.此时我们可以选择将镜像以本地文件的形式导出. 导入 / 导出容器 docker export "CO ...

  2. windows docker(25.0.3) 运行 1.4.1 nacos 容器

    Docker Desktop 设定图标 -> Docker Engine 设定国内镜像源 添加配置: { "builder": { "gc": { &qu ...

  3. 一文轻松搞定 tarjan 算法(二)(附带 tarjan 题单)

    完结篇:tarjan 求割点.点双连通分量.割边(桥)(附 40 道很好的 tarjan 题目). 上一篇(tarjan 求强连通分量,缩点,求边双) tarjan 求割点 还是求强联通分量的大致思路 ...

  4. manim边学边做--通用多边形

    manim提供了通用多边形模块,可以绘制任意的多边形. 通用多边形模块有两种,Polygon和Polygram. Polygon是一个几何学术语,主要指的是由三条或三条以上的线段首尾顺次连接所组成的平 ...

  5. chainLink vrf实验

    目标 用vrf写一个随机红包 数据结构 红包: struct Envelope { Type t; // 类型,只是erc20 和eth红包 ERC20 token; // erc20 ,如果是erc ...

  6. python3 numpy的一些小知识点

    简介 一个用python实现的科学计算,包括: 1.一个强大的N维数组对象Array: 2.比较成熟的(广播)函数库: 3.用于整合C/C++和Fortran代码的工具包: 4.实用的线性代数.傅里叶 ...

  7. .net 到底行不行!2000 人在线的客服系统真实屏录演示(附技术详解) 📹

    业余时间用 .net 写了一个免费的在线客服系统:升讯威在线客服与营销系统. 时常有朋友问我性能方面的问题,正好有一个真实客户,在线的访客数量达到了 2000 人.在争得客户同意后,我录了一个视频. ...

  8. 课时05:Linux必备系统命令

  9. 图书《React.js实战》代码下载

    图书<React.js实战>代码下载链接:https://pan.baidu.com/s/1kep0xsTeSupyr15c3VwmBw 提取码:9pra 这个代码经过图书<Reac ...

  10. nginx服务器下laravel项目无法访问

    nginx服务器下laravel项目无法访问 后台用的nginx服务器,之前在本地开发项目时用的apache服务器,没想到切换到线上访问时除了首页一直显示404的错误,网页无法访问,网上搜索发现是ng ...