nn3
nn3
  • 发布:2023-08-30 14:00
  • 更新:2023-09-01 15:04
  • 阅读:876

uni-data-picker仅显示最后一级

分类:uni-app

有什么方法可以使 uni-data-picker仅显示最后一级吗

2023-08-30 14:00 负责人:无 分享
已邀请:
喜欢技术的前端

喜欢技术的前端 - QQ---445849201

可以使用自定义插槽

<uni-section title="自定义插槽" type="line">  
            <view class="uni-px-5 uni-pb-5">  
                <uni-data-picker v-slot:default="{ data, error, options }" title="请选择" :localdata="classDataTree" v-model="classValue">  
                    <view class="input-border">  
                        <view v-if="error" class="error">  
                            <text>{{ error }}</text>  
                        </view>  
                        <view v-else-if="data.length" class="input-selected">  
                            <view v-for="(item, index) in data" :key="index" class="selected-item">  
                                <text v-if="index == data.length - 1">{{ item.text }}</text>  
                            </view>  
                        </view>  
                        <view v-else><text>请选择</text></view>  
                    </view>  
                </uni-data-picker>  
            </view>  
        </uni-section>  
export default {  
    data() {  
        return {  
            nation: '汉族',  
            address: '110101',  
            // map: {  
            //   text: "label",  
            //   value: "value"  
            // },  
            classValue: '1-2',  
            classDataTree: [  
                {  
                    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) {  
            console.log('nodeclick', e);  
        },  
        onpopupopened(e) {  
            console.log('onpopupopened');  
        },  
        onpopupclosed(e) {  
            console.log('onpopupclosed');  
        },  
        onchange(e) {  
            console.log('onchange', e.detail.value);  
        }  
    }  
};

要回复问题请先登录注册