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);
      }

 

posted @ 2022-10-08 17:15  断桥殇残雪余  阅读(529)  评论(0编辑  收藏  举报