1、picker.wxml
<!--pages/picker/picker.wxml--><view><view class="section__title">多列选择器</view><picker mode="multiSelector" bindchange="bindMultiPickerChange" bindcolumnchange="bindMultiPickerColumnChange"value="{{multiIndex}}" range="{{newArr}}"><view class="picker">当前选择： <van-button type="primary">{{newArr[0][multiIndex[0]]}}，{{newArr[1][multiIndex[1]]}}，{{newArr[2][multiIndex[2]]}}</van-button></view></picker></view>
2、picker.js
// pages/picker/picker.jsPage({/*** 页面的初始数据*/data: {multiArray: [{id: 1,label: "东南",children: [{id: 2,label: "上海",children: [{id: 3,label: "普陀",},{id: 4,label: "黄埔",},{id: 5,label: "徐汇",},],},{id: 7,label: "江苏",children: [{id: 8,label: "南京",},{id: 9,label: "苏州",},{id: 10,label: "无锡",},],},{id: 12,label: "浙江",children: [{id: 13,label: "杭州",},{id: 14,label: "宁波",},{id: 15,label: "嘉兴",},],},],},{id: 17,label: "西北",children: [{id: 18,label: "陕西",children: [{id: 19,label: "西安",},{id: 20,label: "延安",},],},{id: 21,label: "新疆维吾尔族自治区",children: [{id: 22,label: "乌鲁木齐",},{id: 23,label: "克拉玛依",},],},],},],multiIndex: [0, 0, 0],multiIds: [],newArr: [],},bindMultiPickerChange(e) {console.log(this.data.multiIds);},bindMultiPickerColumnChange(e) {let data = {newArr: this.data.newArr,multiIndex: this.data.multiIndex,multiIds: this.data.multiIds,};data.multiIndex[e.detail.column] = e.detail.value;let searchColumn = () => {let arr1 = [];let arr2 = [];this.data.multiArray.map((v, vk) => {if (data.multiIndex[0] === vk) {data.multiIds[0] = {...v,};v.children.map((c, ck) => {arr1.push(c.label);if (data.multiIndex[1] === ck) {data.multiIds[1] = {...c,};c.children.map((t, vt) => {arr2.push(t.label);if (data.multiIndex[2] === vt) {data.multiIds[2] = {...t,};}});}});}});data.newArr[1] = arr1;data.newArr[2] = arr2;};switch (e.detail.column) {case 0:// 每次切换还原初始值data.multiIndex[1] = 0;data.multiIndex[2] = 0;// 执行函数处理searchColumn();break;case 1:data.multiIndex[2] = 0;searchColumn();break;case 2:searchColumn();break;}this.setData(data);},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {let state = {arr: [],arr1: [],arr2: [],arr3: [],multiIds: []}this.data.multiArray.map((v, vk) => {state.arr1.push(v.label);if (this.data.multiIndex[0] === vk) {state.multiIds[0] = v;}if (state.arr2.length <= 0) {v.children.map((c, ck) => {state.arr2.push(c.label);if (this.data.multiIndex[1] === ck) {state.multiIds[1] = c;}if (state.arr3.length <= 0) {c.children.map((t, tk) => {state.arr3.push(t.label);if (this.data.multiIndex[2] === tk) {state.multiIds[2] = t;}});}});}});state.arr[0] = state.arr1;state.arr[1] = state.arr2;state.arr[2] = state.arr3;this.setData({newArr: state.arr,multiIds: state.multiIds,});},});
后端数据要求 数组对象格式，给的不对自己foechar修改。cv进模板就能用，若是二级，则取消第三次的map就可以。多consloe.log就会用了
