vue列表的单独展开收起和全部展开收起

效果如下

列表的展开收起

html代码

   <div class="content1" v-for="(item, index) in list" :key="index">
            <img  class="icon-left info-box" src="~@/assets/images/icon_li2@2x.png" />
        <div class="info-box flex flex-col build_name">{{ item.build_name}}</div>
          <img class="back_right_icon" @click="check(index)" :ref="'icon'+index" :style="{display: isOpen?'block':'none'}" src="~@/assets/images/back_Arrow_down@2x.png" />
           <img class="back_right_icon"  @click="check(index)" :ref="'icon2'+index" :style="{display: !isOpen?'block':'none'}" src="~@/assets/images/back_Arrow_up@2x.png" />
          <div  class="content_box"  :ref="'icon3'+index" :style="{display:isOpen?'flex':'none'}" >
          <div  class="content_span" v-for="(item1, ind) in item.roomList" :key="ind">
                <span v-if="item1.status_cd=='0'" style="color:#666666;background-color: #F5F5F5;" @click="goDecorationPatrol(item1.serv_code,item1.declare_id)">{{item1.room_num}}</span>
                 <span v-if="item1.status_cd=='1'" style="color:#FC5051 ;background-color: #FFF0F0;" @click="goPatrolRecord(item1.serv_code,item1.declare_id)">{{item1.room_num}}<p>待整改</p></span>
                  <span v-if="item1.status_cd=='2'" style="color:#00BA61 ;background-color: #DCF9F0;" @click="goDecorationPatrol(item1.serv_code,item1.declare_id)">{{item1.room_num}}</span>
           </div>
          </div>
       </div>

单击方法

 check(index){
        const first='icon'+index,
            next='icon2'+index,
            last='icon3'+index
       if(this.$refs[`${last}`][0].style.display=='none'){
        this.$refs[`${first}`][0].style.display='block'
        this.$refs[`${next}`][0].style.display='none'
        this.$refs[`${last}`][0].style.display='flex'
       }else{
        this.$refs[`${first}`][0].style.display='none'
        this.$refs[`${next}`][0].style.display='block'
        this.$refs[`${last}`][0].style.display='none'
       }  
    },

全部切换方法

html代码

      <div class="switch_button" @click="isOpen_msg()" v-if="list.length">
             <img class="switch_img" v-if="isOpen" src="~@/assets/images/icon_sc2@2x.png" />
             <img class="switch_img" v-if="!isOpen" src="~@/assets/images/icon_zk@2x.png">
      </div>

方法

  isOpen_msg(){
        this.isOpen=!this.isOpen
    }