根据select语句,动态生成下拉框方法提供参考

思路:首先既然依靠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>

  • 2
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值