elementUI 下拉框select可编辑option?

作者站长头像
站长
· 阅读数 15

下拉框里点击编辑图标出现输入框,但是点击输入框时,下拉框会自动关闭,如何不让下拉框自动关闭?elementUI 下拉框select可编辑option?elementUI 下拉框select可编辑option?

 <el-select
      v-model="selectValue"
      ref="refSelect"
      placeholder="请选择"
      class="select"
      @visible-change="visibleChange"
      @change="selectChange"
    >
      <el-option
        v-for="item in tenderList"
        :key="item.value"
        :label="item.label"
        :value="item.value"
        @click.native="clickOption($event)"
      >
        <!-- @click.stop="handleItemClick(item)" -->
        <div v-if="item.flag" class="edit-input">
          <!-- <div @click="doThisDom($event)"> -->
          <el-input v-model="item.label" placeholder="请输入" size="mini" @focus="inputFocus(item, $event)"></el-input>
          <!-- </div> -->
          <el-button type="text" size="small" @click="editTender(item, $event)">确定</el-button>
          <el-button type="text" size="small" @click="cancelEdit(item, $event)">取消</el-button>
        </div>
        <div v-else class="flex">
          <span>{{ item.label }}</span>
          <span class="aciton">
            <i class="el-icon-edit" @click="showEditTender(item, $event)"></i>
            <i class="el-icon-delete" @click="deleltTender(item.value, $event)"></i>
          </span>
        </div>
      </el-option>
    </el-select>

下拉框数据:

tenderList: [
   { label: '选项一', value: 1, flag: false },
   { label: '选项二', value: 2, flag: false },
   { label: '选项三', value: 3, flag: false }
]

input框focus事件:

inputFocus(e, event) {
   console.log('inputFocus', e)
   console.log(event)
   this.$refs.refSelect.focus()
   event.stopPropagation()
}

这里设置select聚焦,阻止事件冒泡,但是不起作用。给确定按钮这样设置有效果,input就不行

回复
1个回答
avatar
test
2024-07-16

@focus换成@click.native.stop,按钮上的@click也加上.stop修饰符

answer image

回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引,对解决问题有帮助
  • 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容