<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. 使用 crontab 设置 Homebrew 自动更新

    本人有强迫症,希望自己电脑上安装的软件永远是最新的.App Store 有自动更新功能,然而 Homebrew 则没有自动更新的选项.每次手动更新的话时间长了又感觉麻烦.后来发现可以使用 cronta ...

  2. 基于 Quanto 和 Diffusers 的内存高效 transformer 扩散模型

    过去的几个月,我们目睹了使用基于 transformer 模型作为扩散模型的主干网络来进行高分辨率文生图 (text-to-image,T2I) 的趋势.和一开始的许多扩散模型普遍使用 UNet 架构 ...

  3. 微信小程序之无需服务端支持实现内容安全检查

    微信小程序之无需服务端支持实现内容安全检查 微信小程序审核未通过,原因如下: 为避免您的小程序被滥用,请你完善内容审核机制,如调用小程序内容安全API,或使用其他技术.人工审核手段,过滤色情.违法等有 ...

  4. C#整合Ollama实现本地LLMs调用

    前言 近两年AIGC发展的非常迅速,从刚开始的只有ChatGPT到现在的很百家争鸣.从开始的大参数模型,再到后来的小参数模型,从一开始单一的文本模型到现在的多模态模型等等.随着一起进步的不仅仅是模型的 ...

  5. UWP 通过 .NET 9 和Native AOT 的支持实现 UWP 应用的现代化

    微软(9 月 11 日)发布博文,微软正在预览对 .NET 9 的 UWP(通用 Windows 平台)支持,为现有 UWP 开发人员提供一条使用最新的 .NET 和本机 AOT 实现其应用程序现代化 ...

  6. ASP.NET Core – Minimal API

    介绍 Minimal API 是 .NET 6 才开始有的功能. 它是一个简化版本的 Web API. 我还没有认真的去学习它, 感觉它走的是 Node.js Express 的路线. 目前用它来写小 ...

  7. Oracle 到 MySQL 函数替换方案汇总

    常用函数和语法转换     NVL函数 Oracle语法: NVL(COUNT(*), 0) MySQL语法: IFNULL(COUNT(*), 0)   转字符串 Oracle语法: to_char ...

  8. 【赵渝强老师】史上最详细的PostgreSQL体系架构介绍

    PostgreSQL是最像Oracle的开源数据库,我们可以拿Oracle来比较学习它的体系结构,比较容易理解.PostgreSQL的主要结构如下: 一.存储结构 PG数据存储结构分为:逻辑存储结构和 ...

  9. 微信小程序上拉加载

    下面是一个示例,在个人使用的过程中按自己需求进行更改 创建一个DataController控制器 php artisan make:controller DataController 创建一个Data ...

  10. 2024年9月中国数据库流行度排行榜:TiDB重回前三,GoldenDB问鼎前五

    9月墨天轮数据社区的中国数据库流行度排行榜如约而至.除了冠亚两位,排名第三至第五的数据库产品均经历了位次的变动.榜单之上,稳健的老牌强者.崛起的新兴产品.以及那些在背后默默积蓄力量.准备厚积薄发的竞争 ...