526互联

elementUI 下拉框select可编辑option

发布时间 2023-07-10 09:22:31作者: 会转圈圈的哆瑞米

下拉框里点击编辑图标出现输入框，但是点击输入框时，下拉框会自动关闭，如何不让下拉框自动关闭？

 

      

 <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" @click.native.stop="inputFocus(item, $event)"></el-input>
          <!-- </div> -->
          <el-button type="text" size="small" @click.stop="editTender(item, $event)">确定</el-button>
          <el-button type="text" size="small" @click.stop="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()
}