思路:首先既然依靠select查询生成的,那肯定需要进行遍历,将遍历到的数据传到前端,然后进行解析遍历最后绑定到下拉框组件.
1.首先遍历数据,遍历方式有很多种我这里的简单些,我这采用的
for (int i = 0; i < list.size(); i++) { return list; }
public List<PeopleInformation> Information(PeopleInformation peopleInformation) {
List<PeopleInformation> list = medicineMapper.Information(peopleInformation);
for (int i = 0; i < list.size(); i++) {
return list;
}
return null;
}
2.前端交互代码,记得清空数组this.letters=[];,不然每次查询都会把数据存入数组内,越查越多.
async myFunction(val) {
const {
data: result
} = await this.$http.get('/medicine/Information?certno=' + this.queryInfos.certno)
if (result.status !== 200) return this.$message.error("查询失败")
// this.queryInfos.paName=JSON.stringify(result.data)
// // let data=JSON.stringify(result.data[0])
// // this.queryInfos.paName=data.paName
this.queryInfos = result.data[0];
this.letters=[];
for (var i = 0; i < result.data.length; i++) {
this.letters.push({
value: i,
diseName: result.data[i].diseName,
diseCodg: result.data[i].diseCodg,
// label: result.data[i].diseName,
// label: result.data[i].diseCodg
})
}
console.log(result.data.length);
console.log(this.letters);
},
3.绑定下拉框,对下拉框的内容进行遍历从而动态生成下拉框,这里的循环括号内是定义的类型名字,in后面是需要遍历的数组,通过label和value来获取到数据;
opt是letters数组里面的单条数据,j是这条数据在数组里面位置,key是这个v-for循环出来的<el-option>标签的唯一标识
label是这个下拉列表选项在界面显示的值,value是选中这个选项时给变量赋的值
value是真实的值,label是给人看的
<el-form-item label="病种编码" prop="diseCodg">
<el-input placeholder="请输入内容" v-model="queryInfos.diseCodg" class="input-with-select">
<el-select v-model="queryInfos.diseCodg" slot="prepend" placeholder="请选择">
<el-option v-for="(opt,j) in letters"
:key="j"
:label="opt.diseCodg"
:value="opt.diseCodg">
</el-option>
</el-select>
<!-- <el-option v-model="queryInfos.diseCodg" value="3"></el-option>
<el-option v-model="queryInfos.diseCodg" value="4"></el-option>
<el-option v-model="queryInfos.diseCodg" value="5"></el-option> -->
</el-select>
</el-input>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="病种名称" prop="diseName">
<el-input placeholder="请输入内容" v-model="queryInfos.diseName" class="input-with-select">
<el-select v-model="queryInfos.diseName" slot="prepend" placeholder="请选择">
<el-option v-for="(opt,j) in letters"
:key="j"
:label="opt.diseName"
:value="opt.diseName">
</el-option>
</el-select>
</el-input>
</el-form-item>