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

星星港湾 發表於 2021-8-3 20:02:00

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

<h1>背景说明</h1>
uni-app 官方的插件市场有数据驱动选择器，可以用作多级分类的场景。本人引入插件后，发现，在h5和微信小程序都只能选择到叶子级。而在给出的官方组件示例中确并非如此。
 <img src="https://img2020.cnblogs.com/blog/1602649/202108/1602649-20210803134652230-71620805.png">
 可以选择年级，而不选择班级。然后，想试试官方的手机版，发现并没有示例（截至日期2021年8月3日）为止。
当然，这里操作起选择器的时候，或多或少，有些繁琐。因为下方的选择框关闭一次。
然后，我把官网的示例项目下载下来。运行一下，发现做不到只选择年级，不选择班级（似乎，只能到叶子节点了）。
两边的东西居然有区别。不知道官网以后会不会改进方案。
<table border="0">
<tbody>
<tr style="background-color: rgba(204, 204, 204, 1)">
<td> </td>
<td>网页的组件示例</td>
<td>下载的组件示例</td>
</tr>
<tr>
<td>点击一次后</td>
<td>选择当前组件，并关闭用于选择的弹出框</td>
<td>如果包含子级，则切换到子级选择页面；如果不包含子级选择，则关闭</td>
</tr>
</tbody>
</table>
不过，本人的需求中，有可能选择的不是叶子。比如，选择部门的时候。所以，怎样才能任意层级的数据都是可选的呢？
<h1>问题和提出解决方案</h1>
查看说明，发现了uni-data-picker包含以下事件。
<table border="0">
<tbody>
<tr style="background-color: rgba(204, 204, 204, 1)">
<td>事件名称</td>
<td>类型</td>
<td>说明</td>
</tr>
<tr>
<td>@change</td>
<td>EventHandle</td>
<td>选择完成时触发 {detail: {value}}</td>
</tr>
<tr>
<td>@nodeclick</td>
<td>EventHandle</td>
<td>节点被点击时触发</td>
</tr>
<tr>
<td>@popupclosed</td>
<td>EventHandle</td>
<td>弹出层被关闭时触发</td>
</tr>
</tbody>
</table>
 思前想后，有了两种解决方案。
方案一：当点击某一项（触发@nodeclick）时，则选中某一项。
方案二：当点击某一项（触发@nodeclick）时，暂存当前选中的项值；当关闭弹出层（@popupclosed）时，则选中某一项。
考虑如果涉及级联，则方案二，数据更少的变动，则可能更少的影响级联。
<h1>代码示例</h1>
方案一的.vue文件代码如下：
<div class="cnblogs_code"><img id="code_img_closed_0b23f54e-b87a-44af-bdc9-11cdb4630d0d" class="code_img_closed lazyload" data-src="http://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif"><img id="code_img_opened_0b23f54e-b87a-44af-bdc9-11cdb4630d0d" class="code_img_opened lazyload" style="display: none" data-src="http://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif">
<div id="cnblogs_code_open_0b23f54e-b87a-44af-bdc9-11cdb4630d0d" class="cnblogs_code_hide">
<pre> 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></pre>
</div>
View Code</div>
方案二的.vue文件代码如下：
<div class="cnblogs_code"><img id="code_img_closed_28d49c9c-3138-475f-a91c-e7cf705ba729" class="code_img_closed lazyload" data-src="http://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif"><img id="code_img_opened_28d49c9c-3138-475f-a91c-e7cf705ba729" class="code_img_opened lazyload" style="display: none" data-src="http://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif">
<div id="cnblogs_code_open_28d49c9c-3138-475f-a91c-e7cf705ba729" class="cnblogs_code_hide">
<pre> 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></pre>
</div>
View Code</div>
<h1>扩展——获取数据驱动选择器当前的选中值</h1>
数据驱动选择器中，选择完成时（@change）可以获取到当前选中的数组。但是，@nodeclick方法或其他状态下是否可用获取当前选中的数组？可以。我们只要标记对应的数据驱动选择器，即可在代码中找到对象及其选中的数组。
1.标记uni-data-picker对象。
<div class="cnblogs_code">
<pre><uni-data-picker ref="class" placeholder="请选择班级" popup-title="请选择所在地区" :localdata="dataTree" v-model="classes"
 @nodeclick="onnodeclick" ></pre>
</div>
2.获取当前对象的选中值。
<div class="cnblogs_code">
<pre>1 onnodeclick(e) {
2 this.classes = e.value;
3 let selected = this.$refs["class"].selected;
4 console.log("当前选中的值=>" , selected);
5 },</pre>
</div>
<h1>参考网址</h1>
<ul>
<li>uni-data-picker 数据驱动的picker选择器：https://www.cnblogs.com/luyj00436/p/15091506.html</li>
</ul>

</div>
<div id="MySignature" role="contentinfo">
有志者，事竟成，破釜沉舟，百二秦关终属楚；苦心人，天不负，卧薪尝胆，三千越甲可吞吴。 
来源：https://www.cnblogs.com/luyj00436/p/15079273.html

頁: [1]

琼殿技术论坛's Archiver

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