uni-app 官方的插件市场有数据驱动选择器,可以用作多级分类的场景。本人引入插件后,发现,在h5和微信小程序都只能选择到叶子级。而在给出的官方组件示例中确并非如此。

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

 可以选择年级,而不选择班级。然后,想试试官方的手机版,发现并没有示例(截至日期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

相关文章:

  • 2022-12-23
  • 2022-12-23
  • 2022-01-21
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2021-12-04
猜你喜欢
  • 2022-12-23
  • 2021-11-27
  • 2022-12-23
  • 2022-12-23
  • 2021-04-20
  • 2021-11-21
相关资源
相似解决方案