WX小程序 vant UI 调用接口实现二级级联

WX小程序 vant UI 调用接口实现二级级联

思路: 当点击父节点的时候将传递过来的json数组，抽离出一个存放id的数组和一个存放值的数组，
将值的数组赋值给组件调用。当点击选择器的确认按钮 e.detail可以获取值的index，这个值的index刚好映射到id数组中可以获取id。然后再用这个id来发送ajax，请求将数据赋值给这个请求。

JS

Page({
  data: {
    show: false, //底层的弹框
    columns: [],
    ids: [],
    index:'', //选中的数组下标
    title:'',
    status:'', //0 ：学院， 1实验室
  },

  onChange(event) {
    const { picker, value, index } = event.detail;
  },

  showAcademicDialog(){
    this.showAcademicData()
    this.setData({
      show: true,
      title: '学院',
      status: 0
    })
  },
  showLabDialog(){
    this.showLabData()
    this.setData({
      show: true,
      title: '实验室',
      status: 1
    })
  },
  showLabData(){
    let that = this
    wx.request({
      url: 'http://127.0.0.1/instrument/common/getLaboraries.php',
      data:{
        id: that.data.ids[that.data.index]
      },
      success(res){
        if (res.data.code == 200) {
          let arr = res.data.data
          let values = []
          for(let i = 0; i < arr.length; i++) {
              values = values.concat(arr[i].value)
          }
          that.setData({
            columns: values,
          })
        }
      }
    })
  },
  showAcademicData(){
    let that = this
    wx.request({
      url: 'http://127.0.0.1/instrument/common/getAcademies.php',
      data:{},
      success(res){
        if (res.data.code == 200) {
          let arr = res.data.data
          let values = []
          let ids = []
          for(let i = 0; i < arr.length; i++) {
              values = values.concat(arr[i].value)
              ids = ids.concat(arr[i].id)
          }
          that.setData({
            columns: values,
            ids: ids
          })
        }
      }
    })
  },
  confirmDialog(event){
    const { picker, value, index } = event.detail;
    if (this.data.status == 0) {
      this.setData({
        index: index,
        show: false,
        academic: value
      })
    }
    if(this.data.status == 1){
      this.setData({
        show: false,
        lab: value
      })
    }
  },
  cancelDialog(){},
  onClose(){
    this.setData({
      show: false
    })
  },
  onLoad(options){
    
  }
});

json(引入的组件)

{
  "usingComponents": {
    "van-picker": "@vant/weapp/picker/index",
    "van-cell": "@vant/weapp/cell/index",
    "van-cell-group": "@vant/weapp/cell-group/index",
    "van-popup": "@vant/weapp/popup/index"
  }
}

wxml

<van-cell title="学院" value="{{ academic }}" is-link bind:click="showAcademicDialog"></van-cell>
<van-cell title="实验室" value="{{ lab }}" is-link bind:click="showLabDialog"></van-cell>

<!-- 弹框 -->
<van-popup show="{{ show }}" bind:close="onClose" position="bottom">
  <van-picker columns="{{ columns }}" 
    show-toolbar="true"
    title="{{ title }}"
    bind:confirm="confirmDialog"
    bind:cancel="cancelDialog"/>
</van-popup>