问题的抛出
在选择公司的时候是要通过点击下拉列表框进行选择，而下拉列表框的数据来源于数据表，并且要在选择完公司之后下方的社会统一信用代码也要自动选上。
解决思路
给下拉列表框绑定事件——获得鼠标焦点，然后写请求后端的方法去查询数据库获得数据然后保存到一个数组里，把数组里的数据进行遍历回显到下拉列表框内，当点击某个公司时再触发一个事件去查询数据库得到社会统一信用代码，最后把它也进行回显，任务完成。
代码实现
<a-select v-on:focus.once="selectCompany">
注意点：当多次点击下拉列表框会查询多次数据库，回显的时候会数据重复，所以要加上.once就可以保证只查询一次数据库。
查询公司列表方法
// 查询公司列表
export function listCompany (query) {
return request({
url: '/launch/decision/queryCompanyList',
method: 'get',
params: query
})
}
事件触发后执行的方法
selectCompany() {
listCompany().then(resp => {
resp.forEach(element => {
this.companyNameList.push(element.comName)
// console.log(element.comName)
// console.log(element.comCode)
})
}).catch(err => {
console.log(err)
})
}
公司列表数据回显到下拉列表框
<a-select-opt-group>
<span slot="label"><a-icon type="cluster" />中国平煤神马能源化工集团有限责任公司</span>
<a-select-option
v-for="(name) in companyNameList"
:key="name"
@click="comChange(name)">
{{name}}
</a-select-option>
</a-select-opt-group>
查询社会统一信用代码方法
//根据公司名字查询公司代码
export function queryCompanyCode (companyName) {
return request({
url: '/launch/decision/selectCompanyCode/'+companyName,
method: 'get'
})
}
当点击选择某个公司之后触发的方法
comChange(name){
queryCompanyCode(name).then(resp => {
this.form.setFieldsValue({
code: resp,
});
}).catch(err => {
console.log(err)
})
}
社会统一信用代码数据回显到输入框
<a-input
v-decorator="['code', { rules: [{ required: true,message:'统一社会信用代码自动生成!'}] }]"
:disabled="disabled"/>
至此，需求已完成。
