vue循环列表多选,单选
重点: (:data-index="index")
直接上代码,如下
data(){
return{
spanIndex: [],
isChange: -1,
}
}
<div v-else>
<span
v-for="item in typeList[index].children"
:key="item.id"
@click="selectItem(item)"
:class="{activeItem: spanIndex.indexOf(item.id) > -1 }"
:data-index="item.id"
>{{ item.functionName }}</span>
</div>
selectItem(v) {
// 单选
if(v.id != this.isChange){
this.isChange = v.id;
}else{
this.isChange = -1;
}
// 多选
let arrIndex = this.spanIndex.indexOf(v.id);
if(arrIndex > -1){
// 已选中,点击取消
this.spanIndex.splice(arrIndex, 1);
}else{
// 未选中,点击选中
this.spanIndex.push(v.id);
}