最终实现的样子
资料
看到官网的select创建条目远程搜索
当我们新增企业信息的时候,如果企业存在,就从下拉框模糊查询公司名,根据下拉框可输入的内容去匹配公司号码,如果不存在,就创建公司,新增公司号码
<el-select v-model="dataForm.name"
filterable remote reserve-keyword clearable allow-create
placeholder="企业名称" style="width: 100%" :remote-method="getCompanyName" @input="getCompanyLicenseKey($event)">
<el-option
v-for="item in this.dataForm.licenseKeyOptions"
:key="item"
:label="item"
:value="item">
</el-option>
</el-select>
// 企业名称模糊查询
getCompanyName (query) {
this.$http({
url: this.$http.adornUrl(''),
method: 'get',
params: this.$http.adornParams({
'name': query
})
}).then(({data}) => {
if (data && data.code === 0) {
this.dataForm.licenseKeyOptions = data.info
} else {
this.dataForm.licenseKeyOptions = []
}
})
},
名称变化,自动带出企业号码
getCompanyLicenseKey (event) {
this.$http({
url: this.$http.adornUrl(''),
method: 'get',
params: this.$http.adornParams({
'name': event
})
}).then(({data}) => {
if (data && data.code === 0) {
this.dataForm.licenseKey = data.info.license_number
} else {
this.dataForm.licenseKey = ''
}
})
},