el-select实现el-option可编辑

鼠标悬浮出现编辑图标

点击编辑图标对选择项进行修改

 

核心代码如下，注意el-input不要使用@focus，会导致el-select面板收起来；使用@click.native.stop即可

      
        

          
          
            保存
            取消
          
        
        

          {{ item.label }}
          
            
          
        
      
    

 

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
}