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; },