欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

Vue列表中,如何实现多选?

程序员文章站 2022-04-21 11:06:09
首先看一下html列表:第一步:写html结构时,需要将选中的状态写好,当div的class是checked-item时,是选中的状态,所以我们只需要判断选中的时候,class带有checked-item即可;第二步:获取当前选中的id,@click="checkGroup(item.id)第三步:在选中的事件checkGroup中做处理:点击将id存放在数组groupIds中;includes()方法判断是否包含某一元素,返回true或false表示是否包含元素,对NaN一样有效如果包含此id(...

首先看一下html列表:
第一步:写html结构时,需要将选中的状态写好,当div的class是checked-item时,是选中的状态,所以我们只需要判断选中的时候,class带有checked-item即可;
第二步:获取当前选中的id,@click="checkGroup(item.id)
第三步:在选中的事件checkGroup中做处理:点击将id存放在数组groupIds中;
includes()方法判断是否包含某一元素,返回true或false表示是否包含元素,对NaN一样有效
如果包含此id(选中此id)则用arr.indexOf(id)检测,此id的位置,然后利用arr.splice(index,1)将此id去掉。
第四步:在判断class时,运用数组的includes的方法,判断是否包含这个id,groupIds.includes(item.id)。


 <div :class="['class-item',{'checked-item':groupIds.includes(item.id)}]" v-for="(item,index) in groupList" :key="index" @click="checkGroup(item.id)">            
         <div class="info fl">
              <p class="name ellipsis-line1">{{item.groupName}}</p>
              <p class="teacher">班主任:{{item.headTeacherName}}</p>
          </div>
          <p class="number">{{item.parentsCount}}名成员</p>
          <img class="check" src="../../assets/img/sc-selected-sm.png" alt="">
 </div>

js代码,groupList[]这个是从后台接口中获取的数据
在这里插入代码片

export default{
    data(){
      return {
       
        groupList: [] ,// 班级列表
        groupIds: [], // 选中班级id数组

      }
    },
  
    methods:{
      // 选择班级
      checkGroup(id){
        let _this = this;
        let arr = _this.groupIds;
        if(arr.includes(id)){
          //includes()方法判断是否包含某一元素,返回true或false表示是否包含元素,对NaN一样有效
            let index = arr.indexOf(id); // 判断数组中是否有选中的id,如果有则去掉
            if(index > -1){
             arr.splice(index,1)
            }
        }else{
           _this.groupIds.push(id)
        }

      },
      
    }
  }

本文地址:https://blog.csdn.net/qq_16945933/article/details/107352910

相关标签: vue开发问题 vue