uni-app之数据驱动的picker选择器（ uni-data-picker）之可以选择到任意级别

星星港湾 · 发表于 2021-8-3 20:02:00

背景说明

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-width: 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>

View Code

方案二的.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-width: 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>

View Code

扩展——获取数据驱动选择器当前的选中值

数据驱动选择器中，选择完成时（@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