el-select支持增删数据的下拉框

`el-select` 是 Element UI（一个基于 Vue 2.0 的桌面端组件库）中用于创建下拉框的组件。要实现一个支持增删数据的 `el-select` 下拉框，你需要结合 `el-option` 子组件以及一些额外的逻辑来完成数据的增删操作。

以下是一个简单的实现示例：

1. 首先，你需要在 Vue 实例的数据对象中定义 `selectOptions` 作为下拉列表的数据源，并提供 `addOption` 和 `removeOption` 方法来添加或删除选项。

data() {
  return {
    selectOptions: [], // 下拉列表的初始数据
  };
},
methods: {
  addOption(label, value) {
    const newOption = {
      label: label,
      value: value
    };
    this.selectOptions.push(newOption); // 添加新选项到下拉列表
  },
  removeOption(value) {
    this.selectOptions = this.selectOptions.filter(option => option.value !== value); // 根据值删除选项
  }
}

2. 在模板中使用 `el-select` 组件，并绑定 `v-model` 来与 Vue 实例的数据进行双向绑定。

<template>
  <div>
    <el-select v-model="selectedValue" placeholder="请选择">
      <el-option
        v-for="option in selectOptions"
        :key="option.value"
        :label="option.label"
        :value="option.value">
      </el-option>
    </el-select>
    <el-button @click="handleAddOption">添加选项</el-button>
    <!-- 其他逻辑，例如根据 selectedValue 处理删除选项 -->
  </div>
</template>

3. 实现添加和删除选项的逻辑。

methods: {
  handleAddOption() {
    const newLabel = '新选项';
    const newValue = Date.now(); // 使用时间戳作为唯一值
    this.addOption(newLabel, newValue);
  },
  // 示例中未实现删除功能，可以根据实际情况添加删除按钮或操作
}

实现的下拉框既支持选择现有选项，又可以通过添加方法动态地向列表中添加新的选项，并在需要时通过删除方法从列表中移除选项。