码迷,mamicode.com
首页 > 其他好文 > 详细

vant+vue控制列表展开

时间:2021-01-29 11:40:42      阅读:0      评论:0      收藏:0      [点我收藏+]

标签:展开   off   lis   method   dex   远程   bsp   cli   script   

   <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控制列表展开

标签:展开   off   lis   method   dex   远程   bsp   cli   script   

原文地址:https://www.cnblogs.com/cherylgi/p/14338831.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!