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

 

posted @ 2020-08-31 13:55  <_/>  阅读(3424)  评论(0编辑  收藏  举报