avue+elementui设置select选择器可选可输入实现
要个需求,下拉框中输入筛选和未匹配到的值输入,avue和element-ui中只实现了部分,即可输入筛选值。还达不到需求。那么,只能改造原来的element-ui,加个事件监听即可实现。因为使用了avue,所以写法按照avue的写法,使用插槽替换。{label: "旧轮胎号",...
·
要个需求,下拉框中输入筛选和未匹配到的值输入,avue和element-ui中只实现了部分,即可输入筛选值。还达不到需求。
那么,只能改造原来的element-ui,加个事件监听即可实现。
因为使用了avue,所以写法按照avue的写法,使用插槽替换。
{
label: "旧轮胎号",
prop: "ltOldno",
filterable: true,
formslot: true,
rules: [{
required: true,
message: "请输入旧轮胎号",
trigger: "blur"
}],
},
插槽的写法:
<template slot-scope="scope" slot="ltOldno">
<el-select v-model="form.ltOldno" filterable placeholder="请选择" @blur="searchBlur">
<el-option
v-for="item in oldLtList"
:key="item.dictValue"
:label="item.dictKey"
:value="item.dictValue"
></el-option>
</el-select>
</template>
通过事件赋值:
searchBlur(e) {
this.form.ltOldno = e.target.value;
}
效果:失去焦点即可赋值到输入框
更多推荐
已为社区贡献2条内容
所有评论(0)