最近写一个比较大型的商城项目,卡在uni-app的一个细节上了,也就是选择框。
这里直接贴出来最简洁好理解的代码,大家也可以直接拿去用,由于组件比较庞大,我只贴出了主要相关部分:
html部分:
<picker @change="bkslect" :range="form.bkname">
<label class="">{{ form.bkType }}</label>
</picker>
js部分:
// 表单字段元素
const form = {
name: '',
bkname: ['中国银行','中国建设银行','中国工商银行','中国建设银行','招商银行','中国农业银行','中原银行'],
bkIndex:0,
bkType:'---请选择(支持以下银行)---',
banknum: ''
}
// 表单验证规则
const rules = {
name: [{
required: true,
message: '请输入姓名',
trigger: ['blur', 'change']
}],
kaihuhang: [{
required: true,
message: '请选择开户行',
trigger: ['blur', 'change'],
type: 'array'
}],
banknum: [{
required: true,
message: '请输入银行账号',
trigger: ['blur', 'change']
}],
}
data() {
return {
form,
rules,
// 按钮禁用
disabled: false,
}
},
methods: {
//下拉框
bkslect(e) {
this.form.bkIndex = e.target.value;
this.form.bkType=this.form.bkname[this.form.bkIndex]
},
}