背景說明

uni-app 官方的外掛市場有資料驅動選擇器，可以用作多級分類的場景。本人引入外掛後，發現，在h5和微信小程式都只能選擇到葉子級。而在給出的官方元件示例中確並非如此。

可以選擇年級，而不選擇班級。然後，想試試官方的手機版，發現並沒有示例（截至日期2021年8月3日）為止。

當然，這裡操作起選擇器的時候，或多或少，有些繁瑣。因為下方的選擇框關閉一次。

然後，我把官網的示例專案下載下來。執行一下，發現做不到只選擇年級，不選擇班級（似乎，只能到葉子節點了）。

兩邊的東西居然有區別。不知道官網以後會不會改進方案。

不過，本人的需求中，有可能選擇的不是葉子。比如，選擇部門的時候。所以，怎樣才能任意層級的資料都是可選的呢？

問題和提出解決方案

檢視說明，發現了uni-data-picker包含以下事件。

思前想後，有了兩種解決方案。

方案一：當點選某一項（觸發@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>

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

參考網址

• uni-data-picker 資料驅動的picker選擇器：https://www.cnblogs.com/luyj00436/p/15091506.html