el-select multiple状态下，修改特定值el-tag的样式

在工作中遇到一个需求，将选中的tag中status值为0的tag设置为不同的样式，类似这样。

本来以为可以在el-select中利用类似插槽的写法来定制el-tag，在网上找了很久，发现貌似没有这种写法。这里的el-tag貌似是element-ui根据数值自动生成的。

于是用原始js，通过document.getElementsByClassName来修改样式和添加结构。

这里大概可以实现效果，但是会有样式覆盖延时的问题，有朋友知道如何优雅解决这个问题的话，可以滴滴我。

HTML代码：

<template>
  <div id="root">
    <!-- 在el-select聚焦和失焦时，el-select的样式又会重新覆盖，
         所以需要再次调用覆盖框架的样式，
        但是失焦时需要更大的时间间隔，感觉效果不是很好,有更好解决方案可以滴滴我 
    -->
    <el-select
      v-model="value1"
      multiple
      placeholder="请选择"
      @focus="changeTag(1)"
      @blur="changeTag(600)"
    >
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      >
      </el-option>
    </el-select>
  </div>
</template>

 Js代码：

export default {
  name: "App",

  data() {
    return {
      options: [
        {
          value: "选项1",
          label: "黄金糕",
        },
        {
          value: "选项2",
          label: "双皮奶",
        },
        {
          value: "选项3",
          label: "蚵仔煎",
        },
        {
          value: "选项4",
          label: "龙须面",
        },
        {
          value: "选项5",
          label: "北京烤鸭",
        },
      ],
      value1: ["选项1"],
    };
  },
  methods: {
    changeTag(timeout = 500) {
      // 本来尝试用$nextTick,但是不起效果，遂用setTimeout，记得清除
      setTimeout(() => {
        let iconNum = 0;
        for (let i = 0; i < this.value1.length; i++) {
          // 这里写需要改变样式的tag的判断逻辑
          if (
            this.value1[i] === "选项1" ||
            this.value1[i] === "选项2" ||
            this.value1[i] === "选项4"
          ) {
            // 获取各个需要改变样式的element
            let tagInfo = document.getElementsByClassName("el-tag");
            let tagText = document.getElementsByClassName(
              "el-select__tags-text"
            );
            tagInfo[i].style.backgroundColor = "black";
            tagText[i].style.color = "red";

            // icon的原生html结构
            let edit = `
              <i class="el-icon-warning-outline my-warn">
              </i>  
            `;
            iconNum++;
            let myWarn = document.getElementsByClassName("my-warn");
            // 防止重复调用方法导致添加多个icon
            if (myWarn.length == iconNum - 1) {
              tagText[i].insertAdjacentHTML("afterend", edit);
            }
          }
        }
      }, timeout);
    },
  },
  watch: {
    // 在选项改变时，el-select的样式又会重新覆盖，所以需要再次调用覆盖框架的样式
    value1() {
      this.changeTag(1);
    },
  },
  mounted() {
    this.changeTag();
  },
};
</script>