实现循环出来的列表按钮单选或多选,选中效果

在我们实际开发中或多或少的遇到一些UI组件不能满足我们产品需求的时候.我们该怎么办呢?

说服他换成你能快速实现的方式来搞!或者屈服,面向百度自己慢慢搞

悄悄的说一句你这次比较幸运,是面向我了,这个坑我已填平

一. 单选就比较简单了

注意精髓:实现思路来了
第一种是遍历的时候每一项都有一个唯一值也就是索引值, 使用索引值与点击时获取到的当前元素的索引进行比较 两者相等时添加一个类名例如 :class="{active:index==num}",文字理解如果比较吃力 那我们就上代码

// num是在data里面定义变量 通过点击事件改变变量的值
 data() {
    return {
    num:''
    }
    }

<div class="item-box" @click="switchDataSize(index,parentIndex)" :class="{'active':index==num}"  v-for="(item,index) in diskListData" :key="index">
{{item.tilte}}
</div>

switchDataSize(index){
      this.num = index
    } 

多选

注意精髓:实现思路来了
通过true与false进行判断,为true时选中为false则相反
在选中后实现取消的的时候可能会用到arr.indexOf(‘这个为要查找元素’) 当数组中没有当前元素返回值为-1,有当前元素则返回索引值
在从后端 获取过来数据的时候 自己进行一下数据处理,新添加一个字段,如果后端有状态字段更好直接使用就好

this.$set("这个值是目标对象", "这个值是你要新加字段名", "这个就是你字段对应的值了"); 
例如:
  this.$set(obj, "showFlag", true); 

让我们看下完整代码

 <span :class="['tag',{'active': === true}]"
        v-for="(items, indexs) in item.lableList"
         :key="indexs"
         @click="selectClick(items,indexs,index)"
         >{{ items.labelName }} </span>

  data() {
    return {
		lableList:[],
		labelIdList:[]
		}
	}

//这是我个人的请求方式 还请使用你自己的方式
this.$Net.postAction(this.$api.labelList,{typeId: 	element.id,typeName:element.typeName},0,0).then((res)=>{
             this.$set(element, "showFlag", true); //你可能只是需要这里的 添加新字段
             
        })
 // 选中标签事件
    selectClick(val,indexs){
      
        this.lableList[indexs].state = !this.lableList[indexs].state;
        let labelIdList = this.labelIdList
        let indexList = labelIdList.indexOf(val.id)//判断是否有当前值 没有返回-1 有则返回索引值
      if(indexList<0){
       labelIdList.push(val.id);//添加
      }else{
       labelIdList.splice(indexList, 1)//删除
      }
    },

第一次写这么多,乏了,各位大佬 鼠标来个一键三连以示鼓励,手机可以点赞评论 需要的可以收藏备用?

时间紧迫,不懂得私信也ok