背景说明
uni-app 官方的插件市场有数据驱动选择器，可以用作多级分类的场景。本人引入插件后，发现，在h5和微信小程序都只能选择到叶子级。而在给出的官方组件示例中确并非如此。
可以选择年级，而不选择班级。然后，想试试官方的手机版，发现并没有示例（截至日期2021年8月3日）为止。
当然，这里操作起选择器的时候，或多或少，有些繁琐。因为下方的选择框关闭一次。
然后，我把官网的示例项目下载下来。运行一下，发现做不到只选择年级，不选择班级（似乎，只能到叶子节点了）。
两边的东西居然有区别。不知道官网以后会不会改进方案。
| 网页的组件示例 | 下载的组件示例 | |
| 点击一次后 | 选择当前组件，并关闭用于选择的弹出框 | 如果包含子级，则切换到子级选择页面；如果不包含子级选择，则关闭 |
不过，本人的需求中，有可能选择的不是叶子。比如，选择部门的时候。所以，怎样才能任意层级的数据都是可选的呢？
问题和提出解决方案
查看说明，发现了uni-data-picker包含以下事件。
| 事件名称 | 类型 | 说明 |
| @change | EventHandle | 选择完成时触发 {detail: {value}} |
| @nodeclick | EventHandle | 节点被点击时触发 |
| @popupclosed | EventHandle | 弹出层被关闭时触发 |
思前想后，有了两种解决方案。
方案一：当点击某一项（触发@nodeclick）时，则选中某一项。
方案二：当点击某一项（触发@nodeclick）时，暂存当前选中的项值；当关闭弹出层（@popupclosed）时，则选中某一项。
考虑如果涉及级联，则方案二，数据更少的变动，则可能更少的影响级联。
代码示例
方案一的.vue文件代码如下：
1 <template> 2 <view class="container"> 3 <view class="title"> 4 <text>uni-data-picker 本地数据</text> 5 </view> 6 <uni-data-picker placeholder="请选择班级" popup-title="请选择所在地区" :localdata="dataTree" v-model="classes" 7 @nodeclick="onnodeclick" > 8 </uni-data-picker> 9 10 </view> 11 </template> 12 13 <script> 14 export default { 15 data() { 16 return { 17 classes: '1-2', 18 dataTree: [{ 19 text: "一年级", 20 value: "1-0", 21 children: [{ 22 text: "1.1班", 23 value: "1-1" 24 }, 25 { 26 text: "1.2班", 27 value: "1-2" 28 }] 29 }, 30 { 31 text: "二年级", 32 value: "2-0", 33 children: [{ 34 text: "2.1班", 35 value: "2-1" 36 }, 37 { 38 text: "2.2班", 39 value: "2-2" 40 }] 41 }, 42 { 43 text: "三年级", 44 value: "3-0", 45 disable: true 46 }] 47 } 48 }, 49 methods: { 50 onnodeclick(e) { 51 this.classes = e.value; 52 }, 53 } 54 } 55 </script> 56 57 <style> 58 .container { 59 height: 100%; 60 /* #ifndef APP-NVUE */ 61 display: flex; 62 max- 500px; 63 padding: 0 15px; 64 /* #endif */ 65 flex-direction: column; 66 } 67 68 .title { 69 font-size: 14px; 70 font-weight: bold; 71 margin: 20px 0 5px 0; 72 } 73 74 .data-pickerview { 75 height: 400px; 76 border: 1px #e5e5e5 solid; 77 } 78 </style>
方案二的.vue文件代码如下：
1 <template> 2 <view class="container"> 3 <view class="title"> 4 <text>uni-data-picker 本地数据</text> 5 </view> 6 <uni-data-picker placeholder="请选择班级" popup-title="请选择所在地区" :localdata="dataTree" v-model="classes" 7 @nodeclick="onnodeclick" @popupclosed="onpopupclosed"> 8 </uni-data-picker> 9 10 </view> 11 </template> 12 13 <script> 14 export default { 15 data() { 16 return { 17 tempClasses : '', // 临时存放vue值 18 classes: '1-2', 19 dataTree: [{ 20 text: "一年级", 21 value: "1-0", 22 children: [{ 23 text: "1.1班", 24 value: "1-1" 25 }, 26 { 27 text: "1.2班", 28 value: "1-2" 29 }] 30 }, 31 { 32 text: "二年级", 33 value: "2-0", 34 children: [{ 35 text: "2.1班", 36 value: "2-1" 37 }, 38 { 39 text: "2.2班", 40 value: "2-2" 41 }] 42 }, 43 { 44 text: "三年级", 45 value: "3-0", 46 disable: true 47 }] 48 } 49 }, 50 methods: { 51 /** 点击选项时执行方法 52 * @param {Object} e 53 */ 54 onnodeclick(e) { 55 this.tempClasses = e.value; 56 }, 57 /** 关闭弹出框执行方法 58 * @param {Object} e 59 */ 60 onpopupclosed(e) { 61 this.classes = this.tempClasses; 62 }, 63 } 64 } 65 </script> 66 67 <style> 68 .container { 69 height: 100%; 70 /* #ifndef APP-NVUE */ 71 display: flex; 72 max- 500px; 73 padding: 0 15px; 74 /* #endif */ 75 flex-direction: column; 76 } 77 78 .title { 79 font-size: 14px; 80 font-weight: bold; 81 margin: 20px 0 5px 0; 82 } 83 84 .data-pickerview { 85 height: 400px; 86 border: 1px #e5e5e5 solid; 87 } 88 </style>
扩展——获取数据驱动选择器当前的选中值
数据驱动选择器中，选择完成时（@change）可以获取到当前选中的数组。但是，@nodeclick方法或其他状态下是否可用获取当前选中的数组？可以。我们只要标记对应的数据驱动选择器，即可在代码中找到对象及其选中的数组。
1.标记uni-data-picker对象。
<uni-data-picker ref="class" placeholder="请选择班级" popup-title="请选择所在地区" :localdata="dataTree" v-model="classes" @nodeclick="onnodeclick" >
2.获取当前对象的选中值。
1 onnodeclick(e) { 2 this.classes = e.value; 3 let selected = this.$refs["class"].selected; 4 console.log("当前选中的值=>" , selected); 5 },
参考网址
- uni-data-picker 数据驱动的picker选择器：https://www.cnblogs.com/luyj00436/p/15091506.html