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就不行

阅读 2.8k
1 个回答

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

image.png

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题
宣传栏