vue实现el-select内添加的Tag标签自定义变色

element-ui 的 select 的基础多选默认是这个样子的：

现在产品要求每次选择添加的新 Tag 标签可以自定义改变颜色展示。

实现步骤

一、在表单的一个 item 中修改展示方式，使用 el-select 实现目标。

这一步就能实现点击添加选中的 item 为输入框中的 tag。输入内容回车添加新内容。

<el-form-item label="添加标签：" prop="tags" class="add_advice" id="adviceTag">
   <el-select
      v-model="ruleForm.tags"
      clearable
      multiple
      filterable
      allow-create
      default-first-option
      placeholder="请选择或输入标签"
      @change="changeTagColor($event)">
         <el-option
            v-for="item in restaurants"
            :key="item.value"
            :label="item.label"
            :value="item.label"
         ></el-option>
    </el-select>
</el-form-item>

二、给每个 tag 增加自定义样式

1、首先给添加的 tag 修改样式，将背景颜色设置为变量。

F12 找到类名。

添加样式变量：

/deep/.add_advice {
    .el-tag,
    .el-tag.el-tag--info {
      background-color: var(--tagColor);
      border-color: var(--tagColor);
    }
  }

2、设置颜色数组。我这边是十个一组。

tagColorList: [
    '#FF6666',
    '#FF9951',
    '#80C459',
    '#59A56E',
    '#65ADD4',
    '#3D65A1',
    '#372E7C',
    '#5F216D',
    '#903FBF',
    '#BF2F7E'
]

3、html 代码中，有 @change 方法（官网中有），当添加的 tag 改变时，就会调用该方法，返回添加的 tag 名称。

根据上面找到的类名（el-tag–info），拿到所有 tag 的 html。

这里有个问题，我本来之前的想法是：对根据类名返回的 html 列表进行遍历，和颜色列表进行匹配，实现变色。但是！这个 html 列表最后一个 div 总是拿不到。我尝试了转化为列表，或者换一个类名，就是说，不行。（有大佬知道原因欢迎解答！！）

但是，我们可以改变整体的所有 tag 的样式，来改变最后一个拿不到 div 的样式。前面可以遍历的 div 就根据 index 进行匹配样式即可。

总的来说，代码如下。

这个 % 10 是想拿到 index 的个位，因为我的颜色列表只有 0~9，超过 10 就会有问题。

changeTagColor(event) {
      console.log('添加的 tag',event)
      let tagdom = document.getElementsByClassName('el-tag--info')
      document.documentElement.style.setProperty('--tagColor', this.tagColorList[tagdom.length % 10])
      tagdom.forEach(item => {
        let index = event.indexOf(item.innerText) % 10
        item.style.setProperty('--tagColor', this.tagColorList[index])
      })
}

到这里就完整实现了 el-select 内添加的 Tag 标签自定义变色效果，有需要的可以拿去参考。