小程序选择器展现树形表结构数据

树形结构以地区为例，省市区三级联动。这里为什么不用现成的组建呢，因为客户的业务范围比较小（黑人脸）。

我这里写成了一个组件。

wxml：

<view class="section">
  <picker mode="multiSelector" bindchange="PickerChange" bindcolumnchange="ColumnChange" value="{{multiIndex}}" range="{{multiArray}}">
    <input class='well-text' type='text' placeholder='点击选择地区' value='{{region}}' disabled='true'></input>
  </picker>
</view>

wxss：

.well-text{
  height: 60rpx;
  border-bottom: 1px solid #d7dce0;
  box-sizing: border-box;
}

js：

// pages/template/region.js
var appInstance = getApp();

//获取客户地区
var GetKHDQ = function (that) {
  appInstance.post(
    "SYS_DOOPENDATA", [{
      "TYPE": "OPEN",
      "TABLENAME": "KHDQ",
      "FIELDNAME": "KHDQ_DQID, KHDQ_DQMC, KHDQ_MJBZ, KHDQ_FDQID",
      "WHERE": "",
      "ORDER": "KHDQ_DQID"
    }],
    function (res) {
      if (res.data[0].RESULT == 'Y') {
        // console.log(res.data);
        var AreaJson = [];
        var tprovince = [];var tprovinceid = [];
        var tcity = [];var tcityid = [];
        var tarea = [];var tareaid = [];
        for(var i = 1; i<res.data.length;i++){
          AreaJson.push(res.data[i]);
          if (res.data[i].KHDQ_FDQID == 0){
            tprovince.push(res.data[i].KHDQ_DQMC.trim());   //获取省的名称
            tprovinceid.push(res.data[i].KHDQ_DQID.trim()); //获取省的id
          }
        }
        wx.setStorageSync('AreaJson', AreaJson);   //将查询出来的数据放入缓存
        that.setData({
          province: tprovince,
          provinceid: tprovinceid
        });
        GetCity(that,'');
        return;
      } else {
        wx.showToast({
          title: res.data[1].ERRINFO,
          icon: 'none',
          duration: 2000
        });
        return;
      }
    },
    function (xhr, type, errorThrown) {
      return;
    },
  );
}
//获取城市
var GetCity = function(that,provinceindex){
  var AreaJson = wx.getStorageSync('AreaJson');
  var tprovinceid = that.data.provinceid;
  var provincefirstid = tprovinceid[0];
  var tcity = [];var tcityid = [];
  if (provinceindex){
    for (var i = 0; i < AreaJson.length; i++) {           //根据省的id获取地级市
      if (AreaJson[i].KHDQ_FDQID == provinceindex) {
        tcity.push(AreaJson[i].KHDQ_DQMC.trim());
        tcityid.push(AreaJson[i].KHDQ_DQID.trim());
      }
    }
    // console.log([that.data.multiIndex[0],0,0]);
    that.setData({
      city: tcity,
      cityid: tcityid,
      multiIndex: [that.data.multiIndex[0], 0, 0]
    });
    GetArea(that, '');
  }else{
    for (var i = 0; i < AreaJson.length; i++) {
      if (AreaJson[i].KHDQ_FDQID == provincefirstid) {
        tcity.push(AreaJson[i].KHDQ_DQMC.trim());
        tcityid.push(AreaJson[i].KHDQ_DQID.trim());
      }
    }
    that.setData({
      city: tcity,
      cityid: tcityid
    });
    GetArea(that, '');
  }
}
//获取地区
var GetArea = function(that,cityindex){
  var AreaJson = wx.getStorageSync('AreaJson');
  var tcityid = that.data.cityid;
  var cityfirstid = tcityid[0];
  var tarea = []; var tareaid = [];
  if (cityindex){
    for (var i = 0; i < AreaJson.length; i++) {     //根据地级市的id获取区
      if (AreaJson[i].KHDQ_FDQID == cityindex) {
        tarea.push(AreaJson[i].KHDQ_DQMC.trim());
        tareaid.push(AreaJson[i].KHDQ_DQID.trim());
      }
    }
    that.setData({
      area: tarea,
      areaid: tareaid,
      multiIndex: [that.data.multiIndex[0], that.data.multiIndex[1], 0]
    });
  }else{
    for (var i = 0; i < AreaJson.length; i++) {
      if (AreaJson[i].KHDQ_FDQID == cityfirstid) {
        tarea.push(AreaJson[i].KHDQ_DQMC.trim());
        tareaid.push(AreaJson[i].KHDQ_DQID.trim());
      }
    }
    that.setData({
      area: tarea,
      areaid: tareaid
    });
  }
  SelectArea(that);
}

var SelectArea = function(that,areaindex){
  var multiArrayTemp = [that.data.province, that.data.city, that.data.area];
  var multiArrayid = [that.data.provinceid, that.data.cityid, that.data.areaid];
  var khdqid = '';
  var khdqmc = '';
  var khdqmctemp = '';
  for (var i = 0; i < multiArrayid.length; i++) {
    if (multiArrayid[i][that.data.multiIndex[i]]) {
      khdqid = multiArrayid[i][that.data.multiIndex[i]];
      khdqmctemp = multiArrayTemp[i][that.data.multiIndex[i]];
      khdqmc = khdqmc + khdqmctemp;
    }
  }
  // console.log(khdqid);
  that.setData({
    khdqid: khdqid,
    khdqmc: khdqmc,
    multiArray: multiArrayTemp
  })
  // console.log(that.data.khdqid);
  // that.triggerEvent('btnconfirm', { khdqid, khdqmc });//传值到主页面
  // console.log(that.data.multiArray);
}

Component({
  /*组件的生命周期*/
  lifetimes: {
    attached() {
      var that = this;
      GetKHDQ(that);
    },
    detached() {
      // 在组件实例被从页面节点树移除时执行
    },
  },
  // 以下是旧式的定义方式，可以保持对 <2.2.3 版本基础库的兼容
  attached() {
    var that = this;
    GetKHDQ(that);
  },
  detached() {
    // 在组件实例被从页面节点树移除时执行
  },
  /**
   * 组件的初始数据
   */
  data: {
    region:'',
    tykhdqid:'',
    province: [], provinceid: [], city: [], cityid: [], area: [], areaid: [],
    multiArray: [],
    multiIndex: [0, 0, 0],
  },
  /**
   * 组件的方法列表
   */
  methods: {
    PickerChange: function (e) {
      // console.log('picker发送选择改变，携带值为', e.detail.value)
      var khdqid = this.data.khdqid;
      var khdqmc = this.data.khdqmc;
      this.setData({
        region: this.data.khdqmc,
        multiIndex: e.detail.value
      });
      this.triggerEvent('btnconfirm', { khdqid, khdqmc });//将地区id和地区名称传递到主页面
    },
    //多列选择器，某一列的值改变时触发事件
    ColumnChange: function (e) {
      // console.log('修改的列为', e.detail.column, '，值为', e.detail.value);
      var data = {
        multiArray: this.data.multiArray,
        multiIndex: this.data.multiIndex
      };
      data.multiIndex[e.detail.column] = e.detail.value;
      switch (e.detail.column) {
        case 0:
          var provinceindex = this.data.provinceid[this.data.multiIndex[0]];
          GetCity(this, provinceindex);
          break;
        case 1:
          var cityindex = this.data.cityid[this.data.multiIndex[1]];
          GetArea(this, cityindex);
          break;
        case 2:
          var areaindex = this.data.areaid[this.data.multiIndex[2]];
          SelectArea(this,areaindex);
      }
      // console.log(this.data.multiArray);
    },
  }
})

json：

{

"usingComponents": {}

}

 

组件引用根据你的实际情况来。

组件调用方式文档里很详细。