解决下拉框无匹配时又想新增一些问题的妙招

可输入、可新增的下拉框：赋予用户更灵活的数据选择

在构建表单界面时，下拉框作为一种常见的控件，为用户提供了一种方便、高效的方式来选择预定义的选项。然而，有时我们可能会遇到这样的场景：下拉框中没有匹配的选项，但用户又需要添加新的值。在这种情况下，仅仅依靠传统的下拉框是不够的。

本文将介绍一种巧妙的解决方案，使下拉框具备可输入和新增的功能，让用户可以在下拉列表中自由选择或添加新的值。本方案基于流行的前端框架element-ui和vue2，具有以下特点：

• 可输入： 用户可以在下拉框中直接输入新值，无需打开下拉列表。
• 新增： 如果输入的值在下拉列表中不存在，则会自动新增该值，为用户提供灵活的数据管理体验。

实现步骤

1. 创建可输入下拉框

<el-select v-model="selectedValue" filterable>
  <el-option v-for="option in options" :key="option.value" :label="option.label" :value="option.value"></el-option>
</el-select>

通过设置 filterable 属性，下拉框将支持过滤功能，允许用户直接输入进行搜索。

2. 监听输入值变化

<el-select v-model="selectedValue" filterable @input="handleInput">
  <el-option v-for="option in options" :key="option.value" :label="option.label" :value="option.value"></el-option>
</el-select>

添加 @input 事件监听器，用于监听输入值的改变。

3. 判断值是否已存在

handleInput(value) {
  const isExist = this.options.some(option => option.value === value);

  if (!isExist) {
    this.addOption(value);
  }
}

在 handleInput 方法中，通过 some 方法判断输入的值是否已存在于 options 数组中。

4. 添加新值

addOption(value) {
  this.options.push({
    value,
    label: value
  });

  this.selectedValue = value;
}

如果输入的值不存在，则调用 addOption 方法将新值添加到 options 数组中，并更新 selectedValue 为新添加的值。

实例演示

<template>
  <el-select v-model="selectedValue" filterable @input="handleInput">
    <el-option v-for="option in options" :key="option.value" :label="option.label" :value="option.value"></el-option>
  </el-select>
</template>

<script>
export default {
  data() {
    return {
      options: [
        { value: '选项1', label: '选项1' },
        { value: '选项2', label: '选项2' },
        { value: '选项3', label: '选项3' }
      ],
      selectedValue: ''
    };
  },
  methods: {
    handleInput(value) {
      const isExist = this.options.some(option => option.value === value);

      if (!isExist) {
        this.addOption(value);
      }
    },
    addOption(value) {
      this.options.push({
        value,
        label: value
      });

      this.selectedValue = value;
    }
  }
};
</script>

效果展示：

[图片]

扩展应用

本方案不仅适用于新增字符串值，还可以扩展到其他类型的值，例如对象或数组。通过对 addOption 方法的扩展，可以实现更灵活的数据管理。

结语

通过本文介绍的方案，我们可以轻松地创建可输入和新增的下拉框，为用户提供更加灵活和便捷的数据选择体验。本方案基于element-ui和vue2，易于理解和实现，欢迎大家借鉴和使用。

常见问题解答

1. 如何在下拉框中新增对象？

addOption(obj) {
  this.options.push({
    value: obj.id,
    label: obj.name
  });

  this.selectedValue = obj.id;
}

2. 如何在下拉框中新增数组？

addOption(arr) {
  for (let item of arr) {
    this.options.push({
      value: item.id,
      label: item.name
    });
  }

  this.selectedValue = arr[0].id;
}

3. 如何自定义下拉框的显示内容？

<el-select v-model="selectedValue" filterable>
  <el-option v-for="option in options" :key="option.value" :label="option.label" :value="option.value">
    <template slot-scope="scope">
      {{ scope.option.label }} - {{ scope.option.desc }}
    </template>
  </el-option>
</el-select>

4. 如何限制下拉框的可新增次数？

if (this.options.length >= 10) {
  return;
}

this.addOption(value);

5. 如何禁用下拉框的可输入和新增功能？

<el-select v-model="selectedValue" disabled>
  <el-option v-for="option in options" :key="option.value" :label="option.label" :value="option.value"></el-option>
</el-select>