elementUI 下拉框select可编辑option?

  • Z时代
  • 2024-02-29
  • 分类：IT

下拉框里点击编辑图标出现输入框，但是点击输入框时，下拉框会自动关闭，如何不让下拉框自动关闭？
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就不行

回答：

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

elementUI 下拉框select可编辑option?

以上是 elementUI 下拉框select可编辑option? 的全部内容， 来源链接： utcz.com/p/933151.html

回到顶部