el-select实现el-option可编辑

kogmini

已于 2023-12-06 16:00:01 修改

阅读量1.7k

点赞数 2

文章标签： vue.js elementui javascript

于 2023-07-20 15:25:50 首次发布

本文链接：https://blog.csdn.net/csdnyp/article/details/131831545

版权

鼠标悬浮出现编辑图标

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

核心代码如下，注意el-input不要使用@focus，会导致el-select面板收起来；使用@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="inputFocus(item, $event)"></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
}
const inputFocus = (item, e) => {
  e.stopPropagation()
}