<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. JDK有用的新特性-Switch

    目录 箭头表达式,新的 case 标签 yeild 返回值 Java Record Switch 的三个方面,参考: JEP 361 支持箭头表达式 支持 yied 返回值 支持 Java Recor ...

  2. Vue SPA项目如何修改网站标题

    直接贴 门户项目代码 // 全局router 直接挂载路由导航守卫 router.beforeEach((to, from, next) => { if (to.meta.title) { va ...

  3. 如何使用 Redis 实现后台房间的数据管理?

    ​  ​摘要:利用 Redis 实现房间业务管理的实践与思考. 文|即构业务后台开发团队 在一些互动场景中,比如语音聊天室.电商直播等,成员控制.连麦.献花.发弹幕等互动功能,通常要求后台服务器能够储 ...

  4. C# + WPF 音频播放器 界面优雅,体验良好

    前言 本文介绍一款使用 C# 与 WPF 开发的音频播放器,其界面简洁大方,操作体验流畅.该播放器支持多种音频格式(如 MP4.WMA.OGG.FLAC 等),并具备标记.实时歌词显示等功能. 另外, ...

  5. QT与JavaScript之QT6应用程序与JavaScript脚本集成开发:C++应用程序能与JavaScript实现相互调用吗?

    简介 QT6框架中提供了JavaScript引擎类型QJSEngine ,可用于实现 C++应用程序和JavaScript代码之间的相互调用. 目录 什么是 ECMAScript ? JavaScri ...

  6. 托管服务简介IHostedService接口 继承 BackgroundSerice接口

    1. 场景:代码运行在后台,比如服务器启动的时候在后台预先加载数据到缓存,每天凌晨3 点把数据到处到数据库备份,每隔5秒在两张表之间同步一次数据 : 2. 托管服务实现IHoutedService接口 ...

  7. wpf样式模板的使用

    <Window x:Class="WpfApp1.MainWindow" xmlns="http://schemas.microsoft.com/winfx/200 ...

  8. Springboot --- 使用国内的 AI 大模型 对话

    实在是不知道标题写什么了 可以在评论区给个建议哈哈哈哈 先用这个作为标题吧 尝试使用 国内给出的 AI 大模型做出一个 可以和 AI 对话的 网站出来 使用 智普AI 只能 在控制台中输出 对应的信息 ...

  9. 一、Tomcat基础知识与运行原理

    本章节为介绍如何安装Tomcat工具以及其主要架构知识概念,深入浅出让新人玩家理解为什么选择该容器以及该容器的优点 web服务器 概念 服务器:安装了服务器软件的计算机 服务器软件:接收用户的请求,处 ...

  10. 使用 KubeKey 在 AWS 高可用部署 Kubernetes

    作者:李耀宗 介绍 对于生产环境,我们需要考虑 Kubernetes 集群的高可用性.本文教您部署如何在多台 AWS EC2 实例快速部署一套高可用的生产环境.要满足 Kubernetes 集群服务需 ...