elementui的select组件实现可直接输入功能

使用场景:

在某有些情况下我们使用elementui的select下拉框组件,可能除了本身的数据选项,还希望用户可以自定义输入,这时候就需要使用一个属性:allow-create

效果如下:

代码如下:

<el-select 
	size="mini" 
	v-model="data" 
	allow-create  
	default-first-option <!--可直接回车键入  -->
	filterable <!--  必须有该属性 -->
	@change="WOStatusChange"
	placeholder="请选择">
	<el-option 
		v-for="item in dataArray" 
		:key="item.key" 
		:label="item.label"
		:value="item.value">
	</el-option>
</el-select>

刚好碰到了,记录一下

  • 3
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Element UI中的Select组件提供了创建临时选项的功能,可以通过添加一个特殊的选项,并绑定一个动态变量来实现临时选项的创建和显示。 首先,在select的选项中添加一个特殊的选项,例如可以使用“其他”作为一个临时选项。然后,为这个临时选项绑定一个动态变量,在它被选择时,将这个变量设置为true。这个动态变量可以在Vue实例中定义。 接下来,可以使用v-if指令根据动态变量的值来显示临时选项的内容。当动态变量为true时,显示一个输入组件,用于输入其他选项的具体内容。当动态变量为false时,则不显示输入框。 最后,可以通过监听临时选项输入框的值的变化,并将这个值保存到一个数据变量中。这个变量可以用来保存用户输入的具体内容,并在提交表单时使用。 使用Element UI的Select组件创建临时选项的示例代码如下: ``` <template> <div> <el-select v-model="selectedOption"> <el-option label="选项1" value="option1"></el-option> <el-option label="选项2" value="option2"></el-option> <el-option label="其他" value="other" @click.native="createTempOption"></el-option> </el-select> <el-input v-if="showInput" v-model="tempOption" placeholder="请输入其他选项内容"></el-input> <el-button @click="submit">提交</el-button> </div> </template> <script> export default { data () { return { selectedOption: '', showInput: false, tempOption: '' } }, methods: { createTempOption () { this.showInput = true }, submit () { if (this.selectedOption === 'other') { // 处理临时选项的逻辑,可以将用户输入的值保存到一个变量中 console.log(this.tempOption) } else { // 处理其他选项的逻辑 } } } } </script> ``` 以上示例代码使用Element UI的Select组件创建了一个下拉选择框,当选择了“其他”这个临时选项时,会显示一个输入框,用于输入其他选项的具体内容。在提交表单时,会根据选中的选项值来进行相应的处理,可以将临时选项的具体内容保存到一个变量中。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值