前言:
在项目中我们会经常遇到新增的功能,而新增的页面中就会有输入框、下拉框、文本域、日期选择框等等。那么在uniapp是如何给下拉框中调用接口动态绑值的呢?请往下看 💨
💗 uView官网:介绍 | uView 2.0 - 全面兼容nvue的uni-app生态框架 - uni-app UI框架uView UI,是uni-app生态最优秀的UI框架,全面的组件和便捷的工具会让您信手拈来,如鱼得水https://www.uviewui.com/components/intro.html
大纲:
Picker选择器的基本语法:
效果示例:
案例:
🥜 通过调用集团和公司的查询数据接口,将集团和公司的下拉框中动态绑上值。
🐪 第一步:先将下拉框展示出来
<template>
<view class="u-page">
<u--form labelPosition="left" :model="form" :rules="rules" labelWidth="auto" ref="form">
<u-form-item label="集团" prop="orgCode" borderBottom @click="groupShow = true; hideKeyboard()" required>
<u--input v-model="form.orgCode" disabled disabledColor="#fff" suffixIcon="arrow-down"
placeholder="请选择集团" border="none"></u--input>
</u-form-item>
<u-form-item label="公司" prop="Org" borderBottom @click="companyShow = true; hideKeyboard()" required>
<u--input v-model="form.Org" disabled disabledColor="#fff" suffixIcon="arrow-down"
placeholder="请选择公司" border="none"></u--input>
</u-form-item>
</view>
</template>
🐫 第二步: 将接口写入该页面,查看接口是否能调通(即:查询到数据)
<script>
import * as api from '@/request';
export default {
data() {
return {
form: {
visitorName: '',
orgCode: '',
companyId: '',
targetOrg: '',
},
groupShow: false, //集团
companyShow: false, //公司
orgCode: '', //集团编码
jtList: [], //集团list
companyId: '', //公司id
companyList: [], //公司list
rules: {
visitorName: [{
type: 'string',
required: true,
message: '请填写姓名',
trigger: ['blur', 'change']
}, {
validator: (rule, value, callback) => {
return uni.$u.test.chinese(value);
},
message: "姓名必须为中文",
trigger: ["change", "blur"],
}],
],
},
};
},
mounted() {
this.groupInfo();
this.companyInfo();
},
onReady() {
//如果需要兼容微信小程序,并且校验规则中含有方法等,只能通过setRules方法设置规则。
this.$refs.form.setRules(this.rules)
},
methods: {
//集团
groupInfo() {
api.getGroup().then(res => {
if (res.code == 0) {
let arr = res.data.map(item=>{
return {
label:item.orgName,
id:item.orgId
}
});
this.jtList = [arr]
console.log('集团:', this.jtList)
}
});
},
//公司
companyInfo() {
api.getCompany().then(res => {
if (res.code == 0) {
let com = res.data.map(item=>{
return {
label:item.orgName,
id:item.orgId
}
})
this.companyList = [com];
console.log('公司:', this.companyList)
}
});
},
//将键盘收起,使输入框失去焦点
hideKeyboard() {
uni.hideKeyboard()
},
}
};
</script>
数据已经有了,现在我们就看看怎么绑值吧
🦙 第三步:给集团和公司的Picker下拉框绑值
<u-picker :show="groupShow" :columns="jtList" keyName="label" @confirm="groupConfim" @cancel="groupShow=false" ></u-picker>
<u-picker :show="companyShow" :columns="companyList" keyName="label" @confirm="companyConfim" @cancel="companyShow=false"></u-picker>
:show 展示下拉框
:columns 每一列的数据
:keyName 自定义需要展示的
text
属性键名@confirm 确认按钮,返回当前选择的值,同时关闭窗口
@cancel 取消按钮,关闭窗口
🦙 第四步:给集团和公司 确认按钮返回当前选中的值
//集团确定按钮
groupConfim(e) {
// 根据实际需求设置选中的值
this.form.orgCode = e.value[0].label
console.log('获取集团',this.form.orgCode)
this.groupShow = false
},