vue下拉框可修改选项新增选项

在Vue中，可以使用第三方组件库如Element UI中的Select组件实现下拉框可修改选项和新增选项。具体步骤如下：

1. 安装Element UI组件库（如果已经安装可以跳过此步骤）：

npm install element-ui -S

2. 在Vue项目中引入Element UI：

import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI)

3. 在Vue组件中使用Select组件：

<template>
  <div>
    <el-select v-model="selectedOption" filterable remote @query="handleQuery">
      <el-option v-for="option in options" :key="option.value" :label="option.label" :value="option.value"></el-option>
      <el-option v-if="addOption" :key="addOption.value" :label="addOption.label" :value="addOption.value"></el-option>
    </el-select>
    <button @click="addOption">新增选项</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedOption: '',
      options: [
        { value: 'option1', label: '选项一' },
        { value: 'option2', label: '选项二' },
        { value: 'option3', label: '选项三' }
      ],
      addOption: null
    }
  },
  methods: {
    handleQuery(query) {
      // 处理查询逻辑，根据查询结果设置addOption
      if (query) {
        this.addOption = { value: query, label: '新增选项：' + query }
      } else {
        this.addOption = null
      }
    },
    addOption() {
      // 处理新增选项逻辑
      if (this.addOption) {
        this.options.push(this.addOption)
        this.selectedOption = this.addOption.value
        this.addOption = null
      }
    }
  }
}
</script>

在上面的代码中，我们使用了Element UI中的Select组件，并添加了filterable和remote属性，开启了远程搜索功能。通过监听query事件，根据查询结果动态设置addOption，从而实现了新增选项的功能。同时，我们通过点击按钮的方式触发addOption方法，将新增选项添加到options中，并将其设为当前选中项。