需求说明
使用mpvue实现自定义的picker多列选择器。1、数据结构说明
根据 picker 的数据特征，需要构造一个如下所示的数据结构。data数组中的三个元素，分别用于渲染 picker 多列选择器的三列数据。能否构造出这个数据结构，直接影响了 picker 多列选择器实现的难易程度。
pid的作用是用于构建出满足 picker 多列选择器的树状数据结构，要特别注意。
const data = [// 用于picker第一列的数据源[{id:1, name:'A'},{id:2, name: 'B'}],// 用于picker第二列的数据源[{id: 11, pid: 1, name: 'A1' },{id: 12, pid: 1, name: 'A2' },{id: 13, pid: 2, name: 'B1' },{id: 14, pid: 2, name: 'B2' },{id: 15, pid: 2, name: 'B3' }],// 用于picker第三列的数据源[{id: 101, pid: 11, name: 'A1-0000000' },{id: 102, pid: 11, name: 'A1-1111111' },{id: 103, pid: 12, name: 'A2-0000000' },{id: 104, pid: 13, name: 'B1-0000000' },{id: 105, pid: 14, name: 'B2-0000000' },{id: 106, pid: 15, name: 'B3-0000000' },]]
2、视图代码说明
picker 是微信小程序内置组件，基础使用方法请参见其官方文档。mode属性指定了 picker 是多列选择模式。change方法监听 picker 发生变化，用于最终获取 picker 的选择结果。columnchange方法监听 picker 列的变化，这个方法非常重要，在后面写 js 逻辑时要重点使用到它，因为列的变化会导致 picker 视图数据的变化。range是用于 picker 渲染的动态数据，其语法格式是[[第一列数据], [第二列数据], [第三列数据]]，在我们这个需求中，除了第一列数据是不变的之外，第二列和第三列数据都会随着父级数据的变化而变化。range-key用于指定使用哪个字段来渲染 picker 视图。
<template><pickermode="multiSelector"@change="change"@columnchange="columnChange":value="idx":range="list"range-key='name'><view class="picker"><text>你选择的结果是：</text><text v-text='list[0][idx[0]].name'></text><text>、</text><text v-text='list[1][idx[1]].name'></text><text>、</text><text v-text='list[2][idx[2]].name'></text></view></picker></template>
3、业务逻辑说明
声明式变量idx，它是一个数组[第一列数据的索引, 第二列数据的索引, 第三列数据的索引]，是多列选择器选择结果的索引号列表。声明式变量list，它是动态变化的，它用于渲染picker视图，每当columnchange列变化时，list都要发生变化，以保证 picker 多列的联动变化。注意和数据源data区分开来。此 demo 的核心难点是updatelist(col, idx)方法的封装，它负责修改list（注意灵活使用filter这个数组方法），进而更新 picker 视图的联动变化。picker 视图变化分为三种情况：当第一列发生变化时，第二列和第三列都要变化；当第二列变化时，只影响第三列的变化；当第三列变化时，无须修改list。
export default {data: function() {return {idx: [0,0,0], // 多列选择结果的索引号列表list: [] // 用于渲染UI}},onShow() {this.updatelist(0,0) // 初始化渲染},methods: {// 确定picker选择结果时change(e) {let idx = e.target.valuelet arr = this.listthis.idx = idxconsole.log('你选择的结果是：', arr[0][idx[0]].name, arr[1][idx[1]].name, arr[2][idx[2]].name)},// picker的列发生变化时columnChange(e) {// column列索引（0-第一列） value是列中数组索引this.updatelist(parseInt(e.target.column), parseInt(e.target.value))},// 用于更新picker视图的方法封装updatelist(col, idx) {let list = this.list // 视图渲染list[0] = data[0]// picker的第一列数据// 当第一列变化时if(col==0) {// 更新第二列的数据list[1] = data[1].filter(ele=>ele.pid==list[0][idx].id)// 更新第三列的数据list[2] = data[2].filter(ele=>ele.pid==list[1][0].id)this.idx = [idx,0,0]}// 当第二列变化时if(col==1) {// 只用更新第三列数据list[2] = data[2].filter(ele=>ele.pid==list[1][idx].id)this.idx = [this.idx[0], idx, 0]}// 当第三列变化时，不用考虑// 更新list，更新picker视图this.list = list}}}
本篇结束！！！
*获取千锋教育学习视频资料+源码笔记 ，进学习交流群
请添加下方微信（备注CSDN推荐）
