自动生成标签点击变色多选

 

 

html代码

1 <div class="title-btn-div">
2         <span class="btn-span">部门</span>
3         <el-button v-for="(item,index) of tags"
4                    :key="index" size="mini" round
5                    @click="selectTag(index,item.tagId)" :class="{buttonStyle1:arr[index]}"
6         >{{item.tagName}}
7         </el-button>
8       </div>

data部分

const newTags = [
    {tagId: 1, tagName: "线路室"},
    {tagId: 2, tagName: "变电室"},
    {tagId: 3, tagName: "技经室"},
  ];

data() {
      return {
        tags: newTags,
        arr: [],
        tagIds: [],
        lock: true, // 锁
　　　　}
}

js部分

mounted() {
  this.getTags()
},
methods: {
  getTags() {
    for (let i = 0; i < this.tags.length; i++) {
      this.arr.push(false);
    }
  },
  selectTag(index, tagId) {
    this.lock = true;
    for (let i = 0; i < this.tagIds.length; i++) {
      if (this.tagIds[i] == tagId) {
        this.tagIds.splice(i, 1);
        this.lock = false;
      }
    }
    for (let i = 0; i < this.arr.length; i++) {
      if (i == index) {
        this.arr[index] ? this.arr.splice(index, 1, false) : this.arr.splice(index, 1, true);
      }
    }
    if (this.lock) {
      this.tagIds.push(tagId);
    }
  }
}　　

 css部分

.title-btn-div .el-button {
  font-family: Avenir;
  margin-right: 10px;
  width: 120px;
  border: 1px dashed #1e87f0;
  color: #1e87f0;
  background-color: white
}
.buttonStyle1 {
  font-family: Avenir;
  margin-right: 10px!important;
  width: 120px!important;
  border: 1px solid #1e87f0!important;
  color: white!important;
  background-color: #1e87f0!important;
}