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

首先看一下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)
        }

      },
      
    }
  }

    原文作者:qq_16945933
    原文地址: https://blog.csdn.net/qq_16945933/article/details/107352910
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞