vant+vue控制列表展开
<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控制列表展开的更多相关文章
- 035——VUE中表单控件处理之使用vue控制select操作文字栏目列表
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- vue 二级列表折叠面板
请求出来的数据是二级列表,需要点击一级列表展开相应的二级列表 data(){ return { info: [ {name:'一级菜单1',lists:[{price:1},{price:2}]}, ...
- 手势识别官方教程(8)拦截触摸事件,得到触摸的属性如速度,距离等,控制view展开
onInterceptTouchEvent可在onTouchEvent()前拦截触摸事件, ViewConfiguration得到触摸的属性如速度,距离等, TouchDelegate控制view展开 ...
- CSS控制列表样式属性list-style有哪些?怎么用?
CSS列表样式属性list-style有哪些类型?不同类型CSS控制列表样式使用时该注意什么? 这是W3Cschool用户Shirley于2016-11-10在W3Cschool编程问答提出的问题.云 ...
- 034——VUE中表单控件处理之使用vue控制radio表单的实例操作
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 031——VUE中表单控件处理之使用vue控制input和textarea表单项
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 013——VUE中多种方式使用VUE控制style样式属性
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- Phalcon 訪问控制列表 ACL(Access Control Lists ACL)
Phalcon在权限方面通过 Phalcon\Acl 提供了一个轻量级的 ACL(訪问控制列表). Access Control Lists (ACL) 同意系统对用户的訪问权限进行控制,比方同意訪问 ...
- ORA-24247: 网络訪问被訪问控制列表 (ACL) 拒绝
ORA-24247: 网络訪问被訪问控制列表 (ACL) 拒绝 注意:须要在system用户下使用命令 须要先使用 DBMS_NETWORK_ACL_ADMIN.CREATE_ACL 创建訪问控 ...
- Vue 基本列表 && 数据过滤与排序
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8" /> 5 & ...
随机推荐
- Python批量分割Excel后逐行做差、合并文件的方法
本文介绍基于Python语言,针对一个文件夹下大量的Excel表格文件,基于其中每一个文件,首先依据某一列数据的特征截取我们需要的数据,随后对截取出来的数据逐行求差,并基于其他多个文件夹中同样大量 ...
- sicp每日一题[1.44]
Exercise 1.44 The idea of smoothing a function is an important concept in signal processing. If f is ...
- 消息队列初见:一起聊聊引入系统mq 之后的问题
消息队列前文目录 消息队列初见:一起聊聊引入系统mq 之后的问题 https://www.cnblogs.com/yizhiamumu/p/16573472.html 分布式事务实战方案汇总 http ...
- GIS转码的秋招历程与踩坑经历
本文介绍地理信息科学(GIS)专业的2024届应届生,在研三上学期期间,寻找后端研发.软件开发等IT方向工作的非科班转码秋招情况. 首先,这篇文章一开始写于2023年年底,当时为了参加一个征文 ...
- C#/.NET/.NET Core开发实战教程集
DotNetGuide介绍 DotNetGuide是一个专注于C#/.NET/.NET Core学习.工作.面试指南的GitHub知识库,该知识库在GitHub中Star数已突破6.5k+当然这离不开 ...
- 一款基于Uniapp开发的开源低代码平台
rtvue-lowcode低代码开发平台 rtvue-lowcode一款基于uniapp框架和uview组件库的低代码开发平台,项目提供可视化拖拽编辑器,采用MIT开源协议,适用于app.小程序等项目 ...
- DWC3和XHCI的区别
DWC3(DesignWare USB 3.0 Controller)和XHCI(eXtensible Host Controller Interface)都是与USB控制器相关的技术,但它们的作用和 ...
- 墨天轮最受DBA欢迎的数据库技术文档-容灾备份篇
在大家的支持与认可下,墨天轮编辑部继续为大家整理出了[墨天轮最受欢迎的技术文档]系列第二篇--容灾备份篇,希望能够帮助到大家. 作为一名数据库管理员,最怕数据库中心突然失去服务能力.影响业务,而不论是 ...
- iOS中NSBundle使用小结
bundle是一个目录,其中包含了程序会使用到的资源. 这些资源包含了如图像,声音,文本文件,属性列表,语言包,编译好的代码,nib文件(用户也会把bundle称为plug-in). 对应bundle ...
- text-align的对齐方式
text-align的6种取值 left:左对齐 right:右对齐 center:居中 start:如果内容方向是左至右,则等于left,反之则为right. end:如果内容方向是左至右,则等于r ...