zoukankan      html  css  js  c++  java
  • 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;
          },
  • 相关阅读:
    (3)C++复合类型
    (2)C++基本类型
    (7)js调试
    Oracle语句优先级
    oracle排序问题
    jsp四大对象
    postgresql时间加减计算
    全角空格,跟汉字一样宽
    bzoj1433 [ZJOI2009]假期的宿舍 最大流
    BZOJ 1264 AHOI2006 基因匹配Match 动态规划+树状数组
  • 原文地址:https://www.cnblogs.com/cherylgi/p/14338831.html
Copyright © 2011-2022 走看看