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 & ...
随机推荐
- VC 单文档FormView视图增加打印预览
1修改my.rc文件二处 3 TEXTINCLUDE BEGIN "#define _AFX_NO_OLE_RESOURCES\r\n" "#define _AFX_NO ...
- 修改python打包后的窗体图标、任务栏图标、exe图标
前言 我python开发的GUI界面(图形用户界面)一直是tkinter,打包exe一直是Pyinstaller.但是打包出来的exe图标.状态栏图标.窗体左上角图标一直是默认的羽毛,我想自定义. 效 ...
- 【计算机视觉前沿研究 热点 顶会】ECCV 2024中目标检测有关的论文
整值训练和尖峰驱动推理尖峰神经网络用于高性能和节能的目标检测 与人工神经网络(ANN)相比,脑激励的脉冲神经网络(SNN)具有生物合理性和低功耗的优势.由于 SNN 的性能较差,目前的应用仅限于简单的 ...
- FastGPT 正式接入 Flux,准备好迎接 AI 绘画的狂风了么?
Flux 大家最近都听说了吧?它是一款新推出的 AI 绘画模型,拳打 Stable Diffusion 3,脚踢 Midjourney,整个 AI 绘画界都沸腾了. Flux 的主创团队来自由 Sta ...
- Node.js开发博客项目笔记-搭建环境(2)
搭建环境 首先新建blog-1文件夹,在文件夹下初始化package.json,执行命令: npm init -y 生成的package.json文件中的main属性默认值index.js改成bin/ ...
- CSS – RWD (Responsive Web Design) 概念篇
介绍 Only PC 以前是没有手机的, 只有电脑, 所以做开发, 只需要开发电脑版本就可以了. Mobile Version 后来手机诞生, 有钱的公司就做两个版本, 一个手机版, 一个电脑版. 没 ...
- Codeforces Round 973 (Div. 2) D
性质1:题目操作相当于将前面的数搬到了后面,将其视为柱状图,则是把前面柱的高度转移至后面柱的高度 性质2:最后移成的序列以单调不下降序列为最优,易证明当存在下降时,可通过操作使答案更优或不变差 性质3 ...
- Kubernetes基础(Pod?Label?Namespace?Deployment?Service?)(十二)
上面我们都是在架构层面了解 Kubernetes,但是似乎没有发现关于容器的说明,Kubernetes 作为容器编排引擎,那么他是怎么去对容器进行编排的呢?在 Kubernetes 集群中抽象了很多集 ...
- Spark集群的安装及高可用配置
spark官网学习文档 Spark集群的安装及高可用配置 前期需求:Hadoop和Scala必须已经安装完成 步骤: ①进入spark下载网站中https://spark.apache.org/dow ...
- Ai大模型推理-未完善
环境 安装Conda 最低要求 CUDA 版本为 11.3 #获取安装脚本 wget -c 'https://repo.anaconda.com/archive/Anaconda3-2024.06-1 ...