首页 > 其他分享 >elementUI 下拉框select可编辑option

elementUI 下拉框select可编辑option

时间:2023-07-10 09:23:28浏览次数:43  
标签:false option value label flag 下拉框 event select

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

 

      

 <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()
}

 

标签:false,option,value,label,flag,下拉框,event,select
From: https://www.cnblogs.com/lftBlogs/p/17539927.html

相关文章

  • js 控制select 和 radio 赋值和并传值
    js控制select和radio并赋值和传值下面是select用法时:           <selectid="selectId"name="leibname"οnchange="ckc(this.options[this.options.selectedIndex].value);"><optionid="lei1"style="width:150px......
  • js select option 选中触发事件
    <HTML><HEAD><script>functioncc(val){alert(val);}</script></HEAD><BODY><formid="formid"><!--下面是得到option中的内容--><!--<selectοnchange=&qu......
  • Java怎么给下拉框赋值 这个问题怎么解决?
    项目方案:基于Java的下拉框赋值方案1.项目背景和需求分析在开发基于Java的应用程序时,我们经常需要使用下拉框(ComboBox)来展示选项列表,并将选中的值保存到后台。本项目方案旨在提供一种简单而有效的方法来给下拉框赋值,并且能够动态更新选项列表。2.项目目标和功能实现下拉框数......
  • layui表格内可编辑下拉框
    表格内可编辑下拉框扩展自别人的表格内下拉框一、列模板<scripttype="text/html"id="selectTpl"><divclass="inputdiv"><inputclass="layui-input"name="method"z-filter="input"data-tableName=&q......
  • 从 SELECT 看 Mybatis 执行流程
    Mybatis层次结构部件解释:SqlSession作为MyBatis工作的主要顶层API,表示和数据库交互的会话,完成必要数据库增删改查功能ExecutorMyBatis执行器,是MyBatis调度的核心,负责SQL语句的生成和查询缓存的维护StatementHandler封装了JDBCStatement操作,负责对JDBCstatement的......
  • go select 使用总结
    转载请注明出处:在Go语言中,select语句用于处理多个通道的并发操作。它类似于switch语句,但是select语句用于通信操作,而不是条件判断。select语句会同时监听多个通道的操作,并选择其中一个可用的通道进行操作。select语句的语法如下:select{case<-channel1://......
  • 从头学Java17-Stream API(二)结合Record、Optional
    StreamAPIStreamAPI是按照map/filter/reduce方法处理内存中数据的最佳工具。本系列教程由Record讲起,然后结合Optional,讨论collector的设计。使用Record对不可变数据进行建模Java语言为您提供了几种创建不可变类的方法。可能最直接的是创建一个包含final字段的final类。......
  • 介绍几种OPTIONS检测的方法
     概述日常的VOIP开发中,OPTIONS检测是常用的网络状态检测工具。OPTIONS原本是作为获取对方能力的消息,也可以检测当前服务状态。正常情况下,UAS收到OPTIONS心跳,直接回复200即可。与ping不同的是,OPTIONS检测不仅仅针对网络状态,也针对sipserver的端口状态进行检测,在VOIP问题定位......
  • vue-treeselect 被 overflow 遮挡
    场景在一个内容区域设置了overflow纵向滚动的对话框中,内部的vue-treeselect组件下拉框选项被遮挡了。解决办法给vue-treeselect设置appendToBody和z-index属性。注意事项设置了appendToBody后,下拉框选项的字号会变大。为了与原来的字号相匹配,需要修改样式。找......
  • java的可选链Optional
    Optional是Jdk1.8提供的一个新类,用以解决null判断问题,作用类似于JavaScript中的可选链例如如下场景:privatevoidgetIsoCode(Useruser){if(user!=null){Addressaddress=user.getAddress();if(address!=null){Countrycount......