vue v-for循环里面点击当前元素显示再点击隐藏
<li v-for="(list,index) in getTableData(currentPage)" :key="index"> <div class="popup-msg-div"> <div class="msg-div-add">{{list.detail_address}}</div> <div>{{list.serial_number}}</div> <div>{{list.createtime}}</div> <div class="msg-div-add">{{list.warn_desc}}</div> <div class="popup-msg-more" @click="msgShow(index)">查看详情</div> </div> <div class="msg-box" v-show="activeIndex===index"> <div class="msg-box-tit popup-msg-tit "> 异常详情 <div class="popup-box-close" @click="msgClose(index)">收起<b>︽</b></div> </div> <div class="msg-div"> <div>异常原因</div> <div>推送时间</div> <div>推送人员</div> </div> <div class="msg-div" v-for="item in list.detailList"> <div>{{item.warn_desc}}</div> <div>{{item.createtime}}</div> <div>{{item.ctrl_name}}:{{item.ctrl_phone}}</div> </div> </div> </li>
data() { return { activeIndex: -1 }; },
试下传不同的参数?
<div class="popup-msg-more" @click="msgShow(index)">查看详情</div>
msgShow (index) { this.activeIndex = this.activeIndex == index ? -1 : index; },
先遍历,给getTableData这个数组每一项添加一个isShowDetail: false
<div class="popup-msg-more" @click="msgShow(list,index)">查看详情</div>
<div class="msg-box" v-show="list.isShowDetail"> methods:{ msgShow (list,index) { list.isShowDetail = !list.isShowDetail; }, }