如何在el-select选择框上加标签

在 Element UI 的 `el-select` 选择框上添加标签功能，通常是指自定义选项组（tags）。这可以通过监听 `clearable` 属性的 `clear` 事件，并结合 `value` 和 `input` 事件来实现。以下是一个简单的步骤说明：

1. 首先，在你的 Vue 项目中引入并安装 Element UI，确保已导入 `ElOption` 和 `ElInput` 组件。

   <script src="https://unpkg.com/@element-plus/core/lib/index.js"></script>

2. 定义组件的数据结构，包括初始的选择列表和标签列表：

   data() {
     return {
       selectedOptions: [],
       tags: [], // 存放用户输入的标签
     };
   },

3. 在模板部分，创建一个 `el-select` 并设置 `multiple` 选项来支持多选，同时启用 `clearable` 清除按钮：

   <el-select
     v-model="selectedOptions"
     multiple
     clearable
     placeholder="请选择或输入..."
   >
     <!-- ... 其他 options -->
   </el-select>

   <div class="tag-input">
     <el-input
       v-model="tags"
       placeholder="输入新标签"
       @keyup.enter="addTag"
     ></el-input>
     <span v-for="(tag, index) in tags" :key="index">
       {{ tag }}
       <i @click="removeTag(index)">×</i>
     </span>
   </div>

4. 编写 `addTag` 和 `removeTag` 函数，当用户输入新标签并按回车键，或删除已有标签：

   methods: {
     addTag(event) {
       if (event.key === 'Enter') {
         this.selectedOptions.push({ label: event.target.value });
         this.tags.push(event.target.value);
       }
     },
     removeTag(index) {
       this.tags.splice(index, 1); // 移除标签
       const removedOption = this.selectedOptions.find(option => option.label === this.tags[index]);
       this.selectedOptions = this.selectedOptions.filter(option => option !== removedOption); // 从选择中移除
     },
   },

现在，每当用户选择一个选项或在输入框里输入并按回车，都会在选择框旁边添加一个新标签；点击删除按钮可以移除对应标签及选中的选项。