vue实现单选多选

vue实现单选多选

一、明确需求
1、先明确数据有唯一标识区分
2、是否有选中的效果，如果有需要在每个数据里加一个标识来区分
实现下图效果

上代码
this.checkNow是选中得list,item是当前选中的数据对象，voteList是获取到选项的所有数据，votingForm 标识是否单选，isChecked 是否选中用来控制显示状态

// 多选  

 if(this.checkNow.includes(item)){
         this.minusList(item)
        } else {
            this.addList(item)
        }  
        // 添加选中数据方法
       addList(list){
      this.checkNow = this.checkNow.concat(list)
      this.voteList.forEach(item =>{
        if(item.id === list.id){
          item.isChecked = true
        }
        if(this.votingForm == '单选'){
           if(item.id === list.id){
          item.isChecked = true
        }else{
          item.isChecked = false
        }
        }
      })
    }
    // 减去选中
    minusList(list){
      this.checkNow = this.checkNow.filter(item => item != list)
      this.voteList.forEach(item =>{
        if(item.id === list.id){
          item.isChecked = false
        }
      })
    }

单选，checkNow里只会有一条数据

if(this.votingForm == '单选'){
       
        if(this.checkNow && this.checkNow.length > 0 ){
         
          if(this.checkNow[0] != item){
            
          this.checkNow = []
          this.checkNow[0] = item
           this.voteList.forEach(ele =>{
           if(ele.id === item.id){
            ele.isChecked = true
           } else {
            ele.isChecked = false
           }
           })
          } else {
           this.minusList(item)
          }
        } else {
         this.addList(item)
        }
      }

就酱~