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] = itemthis.voteList.forEach(ele =>{if(ele.id === item.id){ele.isChecked = true} else {ele.isChecked = false}})} else {this.minusList(item)}} else {this.addList(item)}}
就酱~
