Element UI el-select下拉菜单自定义最后一个选项并打开el-input

实现这个功能需要使用到el-select的slot和el-input组件。

首先，我们需要在el-select中使用slot，将最后一个选项自定义为一个按钮。代码如下：

<el-select v-model="value">
  <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
  <template v-slot:dropdown-item="{option}">
    <el-button v-if="option === lastOption" type="text" @click="showInput">自定义</el-button>
    <el-option :key="option.value" :label="option.label" :value="option.value"></el-option>
  </template>
</el-select>

其中，lastOption是我们自定义的最后一个选项，options是el-select的选项数组。

接下来，我们在点击自定义按钮时，打开el-input组件。代码如下：

<el-select v-model="value">
  <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
  <template v-slot:dropdown-item="{option}">
    <el-button v-if="option === lastOption" type="text" @click="showInput">自定义</el-button>
    <el-option :key="option.value" :label="option.label" :value="option.value"></el-option>
  </template>
</el-select>

<el-dialog v-model="inputVisible">
  <el-input v-model="inputValue"></el-input>
  <div slot="footer">
    <el-button @click="inputVisible = false">取消</el-button>
    <el-button type="primary" @click="addOption">确定</el-button>
  </div>
</el-dialog>

其中，inputVisible和inputValue是data中的变量，控制el-dialog和el-input的显示和值的绑定。addOption是一个方法，用于将自定义的选项添加到options数组中。

完整的代码如下：

<template>
  <div>
    <el-select v-model="value">
      <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
      <template v-slot:dropdown-item="{option}">
        <el-button v-if="option === lastOption" type="text" @click="showInput">自定义</el-button>
        <el-option :key="option.value" :label="option.label" :value="option.value"></el-option>
      </template>
    </el-select>

    <el-dialog v-model="inputVisible">
      <el-input v-model="inputValue"></el-input>
      <div slot="footer">
        <el-button @click="inputVisible = false">取消</el-button>
        <el-button type="primary" @click="addOption">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      options: [
        { value: 'option1', label: '选项1' },
        { value: 'option2', label: '选项2' },
        { value: 'option3', label: '选项3' },
      ],
      value: '',
      inputVisible: false,
      inputValue: '',
    };
  },
  computed: {
    lastOption() {
      return { value: 'lastOption', label: '自定义' };
    },
  },
  methods: {
    showInput() {
      this.inputVisible = true;
    },
    addOption() {
      this.options.push({ value: this.inputValue, label: this.inputValue });
      this.value = this.inputValue;
      this.inputVisible = false;
    },
  },
};
</script>