el-select嵌套tag

`el-select` 是 Element UI 提供的一个下拉选择组件，它可以用于单选或多选选项的选择。如果你想在 `el-select` 中嵌套另一个 `el-tag` (也称为标签组件)，通常是为了实现动态生成、删除或自定义选项的功能。

例如，在一个 `el-select` 组件中，你可以让用户通过输入添加新的自定义选项，并将这些选项作为 `el-tag` 的内容展示出来。当用户从下拉列表选择一个已有选项时，对应的 `el-tag` 就会被激活；如果用户想要移除某个选项，只需在 `el-select` 中清除相应的值，`el-tag` 也会随之消失。

下面是简单的代码示例：

<template>
  <div>
    <el-select v-model="selectedTags" placeholder="请选择">
      <el-option
        v-for="(item, index) in options"
        :key="index"
        :label="item.label"
        :value="item.value">
      </el-option>
    </el-select>

    <el-input v-model="customTagValue" @keyup.enter="addCustomTag"></el-input>
    <el-tag
      v-for="(tag, index) in customTags"
      :key="index"
      closable
      :closable-icon-class="closeIconClass"
      :type="tag.type"
      :label="tag.text"
      @close="removeCustomTag(index)">
    </el-tag>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedTags: [],
      options: [
        // ...预设的选项...
      ],
      customTagValue: '',
      customTags: [], // 存储自定义标签的对象数组
      closeIconClass: 'el-icon-close', // 标签关闭图标样式
    };
  },
  methods: {
    addCustomTag() {
      if (!this.customTagValue) return;
      const newTag = { value: this.customTagValue, text: this.customTagValue };
      this.$set(this.customTags, this.customTags.length, newTag);
      this.selectedTags.push(newTag.value); // 更新select的值
      this.customTagValue = ''; // 清空输入框
    },
    removeCustomTag(index) {
      this.customTags.splice(index, 1);
      this.selectedTags = this.selectedTags.filter(tag => tag !== this.customTags[index].value);
    },
  },
};
</script>