uni-app实现选择框的最简洁办法——踩坑笔记

zhuanbike 2022-4-3 2312

最近写一个比较大型的商城项目,卡在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]
   },
}


最新回复 (0)
发新帖