el-select既能选择又能输入，并且再次点击时能接着编辑

在Vue.js中，使用Element UI库的el-select组件可以实现既能选择又能输入的功能。为了实现再次点击能继续编辑的效果，可以结合el-input组件和el-select组件来实现。

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

<template>
  <el-select
    v-model="selected"
    filterable
    allow-create
    default-first-option
    placeholder="请选择或输入"
    @visible-change="handleVisibleChange"
  >
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value"
    ></el-option>
  </el-select>
</template>
 
<script>
export default {
  data() {
    return {
      selected: '',
      options: [
        { label: '选项1', value: 'option1' },
        { label: '选项2', value: 'option2' },
        // ...更多选项
      ],
      isEditing: false,
    };
  },
  methods: {
    handleVisibleChange(visible) {
      if (visible && this.isEditing) {
        this.$nextTick(() => {
          const input = this.$el.querySelector('.el-input__inner');
          if (input) {
            input.focus();
          }
        });
      }
      this.isEditing = visible;
    },
  },
};
</script>

在这个示例中，el-select组件的filterable和allow-create属性使得它既能选择也能输入。当用户再次点击选择框时，由于使用了@visible-change事件，如果isEditing为true，则通过$nextTick确保DOM更新完成后使输入框重新获得焦点，从而可以继续编辑。