uniapp 级联选择,uniapp和微信小程序混合开发

一、效果图 二、完整代码

<template><view><picker modemultiSelector changebindMultiPickerChange columnchangebindMultiPickerColumnChange:valuemultiIndex :rangemultiArray><view classpicker>{{multiArray[0][multiIndex[0]]}} > {{multiArray[1][multiIndex[1]]}}</view></picker></view></template><script>export default {data() {return {multiArray: [],multiIndex: [0, 0],//数据格式array: [{id: 0,name: 大类1,children: [{id: 10,name: 小类1},{id: 11,name: 小类11}]},{id: 1,name: 大类2,children: [{id: 20,name: 小类2}]}],oneId: 0,twoId: 0,}},onLoad() {this.getType()setTimeout(() > {this.initData();}, 1000)},methods: {initData() {console.log(111, this.array);//首次加载渲染第一列和第二列数据const arrOne  this.array.map(item > {return item.name; // 此方法将第一列’名称分到一个新数组中});const arrTwo  this.array[0].children.map(item > {return item.name; // 此方法将第二列’名称分到一个新数组中});this.multiArray[0]  arrOne;this.multiArray[1]  arrTwo;this.oneId  this.array[0].id;this.twoId  this.array[0].children[0].id;},//滚动时候触发bindMultiPickerColumnChange(e) {console.log(e.detail.column, e.detail.column表示是第几列表示是第几列)if (e.detail.column  0) {this.initSelect(e.detail.value);this.multiIndex[0]  e.detail.value;} else if (e.detail.column  1) {this.multiIndex[1]  e.detail.value;console.log(detailvalue, e.detail.value);this.twoId  this.array[this.multiIndex[0]].children[this.multiIndex[1]].id;}console.log(this.oneId, 打印第一列id);console.log(this.twoId, 打印第二列id);},//定义一个传入对应的’下标为了拿到第一列id 和第二列的name和id的方法initSelect(index) {this.oneId  this.array[index].id; //拿到第一列idthis.multiIndex[1]  0; //将右边的数组的下标变回第一个显示this.$set(this.multiArray, 1, []); //清空对应右边数组的数据if (this.array[index].children.length  0) {console.log(如果右边长度等于0,那么清掉右边ID);this.twoId  ;} else {const arrTwo  this.array[index].children.map(item > {return item.name; //将第一列的children的数组遍历name返回到一个新数组接收});this.$set(this.multiArray, 1, arrTwo); //重新赋值到新的数组里this.twoId  this.array[index].children[0].id; //升那么对SB一八en  t}},//点击确定时触发,这里点击处理自己的业务,应该就是拿到两个个id去请求bindMultiPickerChange(e) {console.log(this.oneId);console.log(this.twoId);},getType() { //清场uni.request({url:  (res) > {console.log(res.data);//后台返回的是两个数组一个数组是大分类一个小分类//将两个数组生成树结构 赋值给arraythis.array  res.data.types.map((item, index) > {return {...item,children: res.data.goods[index]}})console.log(array, this.array);//后台返回数据格式//types:[{id:x,name:xx},{},{}...]//goods:[[{id:x,name:x},{},{}...],[],[],...]}})},}}</script><style>.uni-picker-tips {font-size: 12px;color: #666;margin-bottom: 15px;padding: 0 15px;/* text-align: right; */}</style>