改造el-select默认显示一个tag问题

原组件

• 第一个是全部展示，第二个是只展示一个后面隐藏

用第一个来修改
代码

<template>
  <div class="">
    <el-select
      ref="select"
      v-model="value2"
      multiple
      style="width:300px"
      placeholder="请选择"
      @change="handleChange"
    >
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      >
      </el-option>
    </el-select>
  </div>
</template>

<script>
export default {
  data() {
    return {
      options: [
        {
          value: "选项1",
          label: "黄金糕"
        },
        {
          value: "选项2",
          label: "双皮奶"
        },
        {
          value: "选项3",
          label: "蚵仔煎"
        },
        {
          value: "选项4",
          label: "龙须面"
        },
        {
          value: "选项5",
          label: "北京烤鸭"
        }
      ],
      value2: []
    };
  },
  mounted() {
    this.value2 = ["选项1", "选项2", "选项3"];
    this.$nextTick(() => {
      //初始化页面数据
      this.handleChange();
    });
  },
  methods: {
    handleChange(value) {
      this.$nextTick(() => {
        //获取选择框的span元素数量
        let n = this.$refs.select.$el.querySelector(".el-select__tags > span")
          .children.length;
        if (n>2) {
          n-1;
        }
        //循环隐藏多余的span元素
        for (let i = 0; i < n; i++) {
          let a = i + 1;
          if (a > 2) {
            this.$refs.select.$el.querySelector(
              `.el-select__tags > span >span:nth-child(${a})`
            ).style.display = "none";
          }
        }
        //添加多余元素的span （+1）
        let dom = document.createElement("span");
        dom.classList = ["count-node"];
        if (this.value2.length > 2) {
          if (document.querySelector(".count-node")) {
            document.querySelector(".count-node").remove();
          }
          dom.style.display = "inline-block";
          dom.innerHTML = `+${this.value2.length - 2}`;
          this.$refs.select.$el
            .querySelector(".el-select__tags > span")
            .append(dom);
        } else {
          if (document.querySelector(".count-node")) {
            document.querySelector(".count-node").remove();
          }
        }
        //默认让前两个元素显示
        if (this.value2.length >=2) {
          setTimeout(()=>{
            this.$refs.select.$el.querySelector(
            `.el-select__tags > span >span:nth-child(1)`
          ).style.display = "inline-block";
          this.$refs.select.$el.querySelector(
            `.el-select__tags > span >span:nth-child(2)`
          ).style.display = "inline-block";
          },60)//延迟执行（否则获取不到dom）
        }
      });
    }
  },
};
</script>
<style lang="scss" scoped>
>>> .count-node {
  display: inline-block;
  height: 24px;
  padding: 0 8px;
  line-height: 22px;
  margin-left: 6px;
  background-color: #f4f4f5;
  border: 1px solid #e9e9eb;
  border-radius: 4px;
  color: #909399;
  font-size: 12px;
  box-sizing: border-box;
}
</style>

代码原理为默认让前两个显示（display:‘inline-block’）,其他元素隐藏（display:‘none’）,超过两个后添加一个span元素显示隐藏元素的数量

代码可能存在性能问题，如有发现请指出

效果图