el-select implements el-option editability

The edit icon appears when the mouse is hovering

Click the edit icon to modify the selections

 

The core code is as follows. Be careful not to use @focus for el-input, which will cause the el-select panel to be closed; use @click.native.stop.

<el-select v-model="value" placeholder="选择" style="width:300px;">
      <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
          @mouseenter.native="selectMouseenter(item)"
          @mouseleave.native="selectMouseleave(item)"
      >
        <div v-if="item.showEditInput">
          <el-input style="width:120px;float: left;" v-model="item.label"
                    @click.native.stop></el-input>
          <span style="float: right;">
            <el-button type="text" size="small" @click.stop="saveEdit(item, $event)">保存</el-button>
            <el-button type="text" size="small" @click.stop="cancelEdit(item, $event)">取消</el-button>
          </span>
        </div>
        <div v-else>
          <span style="float: left;">{
   
   { item.label }}</span>
          <el-icon style="float: right;margin-top: 10px;" @click.stop="editBtn(item)" v-if="item.showEditIcon">
            <Edit/>
          </el-icon>
        </div>
      </el-option>
    </el-select>

 

const value = ref('')
const options = ref([
      {
        value: 'Option1',
        label: 'Option1',
        showEditIcon: false,
        showEditInput: false
      },
      {
        value: 'Option2',
        label: 'Option2',
        showEditIcon: false,
        showEditInput: false
      },
      {
        value: 'Option3',
        label: 'Option3',
        showEditIcon: false,
        showEditInput: false
      },
      {
        value: 'Option4',
        label: 'Option4',
        showEditIcon: false,
        showEditInput: false
      },
      {
        value: 'Option5',
        label: 'Option5',
        showEditIcon: false,
        showEditInput: false
      },
    ])

const selectMouseenter = (item) => {
  item.showEditIcon = true
}
const selectMouseleave = (item) => {
  item.showEditIcon = false
}
const editBtn = (data) => {
  for (let item of options.value) {
    item.showEditInput = data.value === item.value;
  }
}
const saveEdit = (item, e) => {
  item.showEditInput = false
}
const cancelEdit = (item, e) => {
  item.showEditInput = false
}