Vant picker 选择器 多级联动小白教程

虽然 Vant picker选择器网上有很多文章，但都是前端js写死的数据，并没有写道后端过来的数据如何处理、如何与选择器绑定，

今天我就来记录一下我的写法：

1.后台返回数据格式：

{
    "success": 1,
    "data": [
        {
            "children": [
                {
                    "id": "11111111",
                    "text": "123"
                }
            ],
            "id": "22222222",
            "text": "药房2"
        },
        {
            "children": "",
            "id": "33333333",
            "text": "药房a"
        },
        {
            "children": "",
            "id": "44444444",
            "text": "中药房2"
        }
    ],
    "code": "",
    "message": ""
}

解释：

"text": 组件会默认text为选择器显示的内容

”id“:id

2.wxml:

    <van-cell-group>
       <van-cell title-class="hwms-cell-title" title-width="225rpx" value-class="hwms-cell-content" title="仓库-库位" value="{{warehouseContent}}" bind:click="warehouse" />
    </van-cell-group>
    <van-popup  show="{{show}}" position="bottom" bind:close="hideBottom">
       <van-picker bind:change="onChange3" columns="{{ columns }}" confirm-button-text="确认" cancel-button-text="取消" show-toolbar="true" bind:confirm="selectWarehouse" bind:cancel="cancelSelect" />
    </van-popup>

3.js：

const app = getApp();
Page({
  /**
   * 页面的初始数据
   */
  data: {
    show: false,
    warehouseContent: '点击选择', //输入框显示的内容
    columns: [], //对象数组，配置每一列显示的数据
  }, 
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    let that = this;
    //请求接口获得返回数据
    app.ajaxCall("/test/findAll", "", function (result) {
      var data = result.data;//后端返回的数据,见第一部中的json数据格式
      if (data.success == 1) {
        var citys = data.data;
        that.setData({
          columns: [{
            values: citys, // 设置的第一列的初始值
            className: "column1"
          },
          {
            values: citys[0].children,// 设置第二列的初始值
            className: "column2"
          }
          ]
        });
      }
    });
  },
  /**
   * 显示选择器
   */
  warehouse: function () {
    this.setData({ show: true });
  },
   /**
   * 隐藏选择器
   */
  cancelSelect() {
    this.setData({ show: false });
  },
   /**
   * 选择器确认选择
   */
  selectWarehouse(event) {
    var storeId = event.detail.value[0].id; //第一列的Id
    var storeName = event.detail.value[0].text;//第一列的文字
    var placeName = "";//第二列文字
    var placeId = '';//第二列Id
    var warehouseContent = ""; //选择框显示的文字
    if (event.detail.value[1]) {
      placeId = event.detail.value[1].id;//第二列的Id
      placeName = event.detail.value[1].text;//第二列的文字
      warehouseContent = storeName + "-" + placeName;//第一列第二列文字拼接
    }else{
      warehouseContent = storeName;//第二列没有值只显示第一列文字
    }
    this.setData({
      show: false,
      warehouseContent: warehouseContent,
    });
  },
  /**
   * 选择器改变选择项触发
   */
  onChange3(event) {
    const {
      picker,
      value,
      index
    } = event.detail;
    let ColumnIndex = picker.getColumnIndex(index);
    console.log(value);
    //改变第一列显示第二列的初识值
    picker.setColumnValues(index + 1, value[0].children == null ? '' : value[0].children);
  },
})

效果图：