uni-app选择器( uni-data-picker)选择任意级别

32 篇文章 1 订阅
6 篇文章 0 订阅

背景说明 

uni-app 官方的插件市场有数据驱动选择器,可以用作多级分类的场景。引入插件后,发现做不到只选择年级,不选择班级(似乎,只能到最后子节点了)。

需求中,有可能选择的不是叶子。比如,选择部门的时候。所以,怎样才能任意层级的数据都是可选的呢? 

解决方案

当点击某一项(触发@nodeclick)时,暂存当前选中的项值;当关闭弹出层(@popupclosed)时,则选中某一项。

<template>
<uni-data-picker ref="class" placeholder="请选择文件夹" popup-title="请选择所在文件夹" :localdata="data_tree" v-model="classes" @change="chageClear" @popupclosed="chageClosed" @nodeclick="onnodeclick">
</uni-data-picker>
</template>
<script>
	export default {
		data() {
			return {
				item: '',
				classes: '',
				data_tree: [{
						_id: '123',
						text: "文章",
						value: "1-0",
						path: 'article-list',
						children: [{
							text: "1.1班",
						 	value: "1-1"
						 } ]
					},
//也可以这样定义1.2班同级 注意parent_value和父value一致才能是子级
{
    _id: "646e3b230c801ca878cad126",
    parent_value: '1-0',
    text: "1.2班",
	value: "1-2"
},
					{
						_id: '1231',
						text: "反馈",
						value: "2-0",
						path: 'cloudstorage'
					},
					{
						_id: '12322',
						text: "用户图像",
						value: "3-0",
						path: 'user-list'
					},
					{
						_id: '233232',
						text: "apk",
						value: "4-0",
						disable: true,
						path: 'apk'
					},
					{
						_id: '233232',
						text: "模拟云文件",
						value: "5-0",
						path: '/'
					}
				],
			}
		},
		methods: {
			initDate() {
				this.item = ''
			},
			chageClosed() {
				//处理不同步
				this.$nextTick(() => {
					this.classes = this.item.value
					if (!this.item) return
					this.chageValu(this.item)
				});
			},
			//只是清空下执行
			chageClear(e) {
				const value = e.detail.value[0]
				if (!value) {
					this.initDate()
				}
			},
			chageValu(value) {
				//do...
			},
			onnodeclick(e) {
                //如果是子级e会有内置的parent_value,同时方便后台数据渲染添加
				this.item = e
			},
		}
	}
</script>

  • 1
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

WebCsDn_TDCode

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值