uni-app之數據驅動的picker選擇器（ uni-data-picker）之可以選擇到任意級別

背景說明

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

 

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

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

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

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

	網頁的組件示例	下載的組件示例
點擊一次后	選擇當前組件，並關閉用於選擇的彈出框	如果包含子級，則切換到子級選擇頁面；如果不包含子級選擇，則關閉

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

問題和提出解決方案

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

事件名稱	類型	說明
@change	EventHandle	選擇完成時觸發 {detail: {value}}
@nodeclick	EventHandle	節點被點擊時觸發
@popupclosed	EventHandle	彈出層被關閉時觸發

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

方案一：當點擊某一項（觸發@nodeclick）時，則選中某一項。

方案二：當點擊某一項（觸發@nodeclick）時，暫存當前選中的項值；當關閉彈出層（@popupclosed）時，則選中某一項。

考慮如果涉及級聯，則方案二，數據更少的變動，則可能更少的影響級聯。

代碼示例

方案一的.vue文件代碼如下：

<template>
    <view class="container">
        <view class="title">
            <text>uni-data-picker 本地數據</text>
        </view>
        <uni-data-picker placeholder="請選擇班級" popup-title="請選擇所在地區" :localdata="dataTree" v-model="classes"
             @nodeclick="onnodeclick"  >
        </uni-data-picker>

    </view>
</template>

<script>
    export default {
        data() {
            return {
                classes: '1-2',
                dataTree: [{
                    text: "一年級",
                    value: "1-0",
                    children: [{
                        text: "1.1班",
                        value: "1-1"
                    },
                    {
                        text: "1.2班",
                        value: "1-2"
                    }]
                },
                {
                    text: "二年級",
                    value: "2-0",
                    children: [{
                        text: "2.1班",
                        value: "2-1"
                    },
                    {
                        text: "2.2班",
                        value: "2-2"
                    }]
                },
                {
                    text: "三年級",
                    value: "3-0",
                    disable: true
                }]
            }
        },
        methods: {
            onnodeclick(e) {
                this.classes = e.value;
            },
        }
    }
</script>

<style>
    .container {
        height: 100%;
        /* #ifndef APP-NVUE */
        display: flex;
        max-width: 500px;
        padding: 0 15px;
        /* #endif */
        flex-direction: column;
    }

    .title {
        font-size: 14px;
        font-weight: bold;
        margin: 20px 0 5px 0;
    }

    .data-pickerview {
        height: 400px;
        border: 1px #e5e5e5 solid;
    }
</style>

方案二的.vue文件代碼如下：

<template>
    <view class="container">
        <view class="title">
            <text>uni-data-picker 本地數據</text>
        </view>
        <uni-data-picker placeholder="請選擇班級" popup-title="請選擇所在地區" :localdata="dataTree" v-model="classes"
             @nodeclick="onnodeclick"  @popupclosed="onpopupclosed">
        </uni-data-picker>

    </view>
</template>

<script>
    export default {
        data() {
            return {
                tempClasses : '',    // 臨時存放vue值
                classes: '1-2',
                dataTree: [{
                    text: "一年級",
                    value: "1-0",
                    children: [{
                        text: "1.1班",
                        value: "1-1"
                    },
                    {
                        text: "1.2班",
                        value: "1-2"
                    }]
                },
                {
                    text: "二年級",
                    value: "2-0",
                    children: [{
                        text: "2.1班",
                        value: "2-1"
                    },
                    {
                        text: "2.2班",
                        value: "2-2"
                    }]
                },
                {
                    text: "三年級",
                    value: "3-0",
                    disable: true
                }]
            }
        },
        methods: {
            /** 點擊選項時執行方法
             * @param {Object} e
             */
            onnodeclick(e) {
                this.tempClasses = e.value;
            },
            /** 關閉彈出框執行方法
             * @param {Object} e
             */
            onpopupclosed(e) {
                this.classes = this.tempClasses;
            },
        }
    }
</script>

<style>
    .container {
        height: 100%;
        /* #ifndef APP-NVUE */
        display: flex;
        max-width: 500px;
        padding: 0 15px;
        /* #endif */
        flex-direction: column;
    }

    .title {
        font-size: 14px;
        font-weight: bold;
        margin: 20px 0 5px 0;
    }

    .data-pickerview {
        height: 400px;
        border: 1px #e5e5e5 solid;
    }
</style>

擴展——獲取數據驅動選擇器當前的選中值

數據驅動選擇器中，選擇完成時（@change）可以獲取到當前選中的數組。但是，@nodeclick方法或其他狀態下是否可用獲取當前選中的數組？可以。我們只要標記對應的數據驅動選擇器，即可在代碼中找到對象及其選中的數組。

1.標記uni-data-picker對象。

<uni-data-picker ref="class" placeholder="請選擇班級" popup-title="請選擇所在地區" :localdata="dataTree" v-model="classes"
         @nodeclick="onnodeclick" >

2.獲取當前對象的選中值。

onnodeclick(e) {
    this.classes = e.value;
    let selected = this.$refs["class"].selected;
    console.log("當前選中的值=>" , selected);
},

參考網址

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