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

news2024/11/20 0:54:22

背景说明 

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>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/830524.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

渣罐炉倾翻液压系统比例阀控制器

渣罐炉倾翻液压系统是一种用于渣罐炉倾翻的液压系统&#xff0c;由液压泵、油缸、阀组、油箱、管路等组成。 2. 启动液压泵&#xff0c;将液压油输送到油缸。 总之&#xff0c;渣罐炉倾翻液压系统具有操作简便、高效稳定等特点&#xff0c;适用于各种类型的渣罐炉倾翻。

SpringBoot+Vue开发笔记

参考&#xff1a;https://www.bilibili.com/video/BV1nV4y1s7ZN?p1 ----------------------------------------------------------概要总结---------------------------------------------------------- 1、MVC架构&#xff1a; View&#xff1a;与用户交互 Controller&…

浅谈下API初步认知

当我们谈论API&#xff0c;我们指的是应用程序接口&#xff08;Application Programming Interface&#xff09;。API允许不同的软件应用程序之间互相通信和交互。它定义了一组规定和协议&#xff0c;用于确定数据传输和请求的格式、方法和功能。 API的作用是在软件开发中提供一…

运动蓝牙耳机什么款式好、适合运动的蓝牙耳机推荐

夏天到了&#xff0c;越来越多的年轻人会选择在一天的忙碌之后通过简单的运动缓解疲劳。而在运动装备的选择上&#xff0c;除了常规的衣服、鞋之外&#xff0c;耳机也成为了当下年轻群体的必备项&#xff0c;尤其是在运动的过程中听听喜欢的音乐或者电台能够更好地放松身心。那…

Go init 顺序 使用建议

init函数的主要作用&#xff1a; 初始化不能采用初始化表达式初始化的变量。程序运行前的注册&#xff0c;例如初始化数据库链接。实现sync.Once功能。其他 init函数的主要特点&#xff1a; init函数先于main函数自动执行&#xff0c;不能被其他函数调用&#xff1b;init函数…

LeetCode每日一题Day3——1. 两数之和

✨博主&#xff1a;命运之光 &#x1f984;专栏&#xff1a;算法修炼之练气篇&#xff08;C\C版&#xff09; &#x1f353;专栏&#xff1a;算法修炼之筑基篇&#xff08;C\C版&#xff09; &#x1f433;专栏&#xff1a;算法修炼之练气篇&#xff08;Python版&#xff09; …

Java编程常用数据转换:String与int互转、Date与String互转、BigDecimal与int比较

一、String与Int互转 在 Java 中要将 String 类型转化为 int 类型时&#xff0c;需要使用 Integer 类中的 parseInt() 方法或者 valueOf() 方法进行转换。 String str "555555555"; int a Integer.parseInt(str); // 方式1 int b Integer.valueOf(str).intValu…

从虚拟到现实:数字孪生助力建筑创新

随着科技的不断进步&#xff0c;数字孪生技术正逐渐成为建筑行业的新宠。数字孪生是一种将实体世界与数字世界相结合的技术&#xff0c;通过将现实世界中的物体、系统或过程以数字化的方式进行建模和仿真&#xff0c;实现了真实世界与虚拟世界的互通。 在建筑行业中&#xff0c…

酷开系统 | 酷开科技,让数据变得更有价值!

身处信息时代&#xff0c;我们每个人时刻都在生成、传递和应用数据&#xff0c;数据已经成为了现代社会中宝贵的资源之一&#xff0c;而在人工智能领域&#xff0c;数据更是被称为人工智能的“燃料”。 而在AI的发展中&#xff0c;只有拥有高质量、多样性且充分代表性的数据集…

Sqli-labs1~65关 通关详解 解题思路+解题步骤+解析

Sqli-labs 01关 (web517) 输入?id1 正常 输入?id1 报错 .0 输入?id1-- 正常判断是字符型注入&#xff0c;闭合方式是这里插一句。limit 100,1是从第100条数据开始&#xff0c;读取1条数据。limit 6是读取前6条数据。 ?id1 order by 3-- 正常判断回显位有三个。?id…

途乐证券|医药板块走高,神奇制药、双成药业涨停,科源制药等拉升

医药板块3日盘中震动走高&#xff0c;截至发稿&#xff0c;睿智医药涨超15%&#xff0c;景峰医药、神奇制药、双成药业等涨停&#xff0c;誉衡药业、科源制药涨约7%&#xff0c;精华制药、赛托生物涨约6%。 途乐证券指出&#xff0c;医药商场当前仍处于磨底行情&#xff0c;但行…

手机商城免费搭之java商城 电子商务Spring Cloud+Spring Boot+mybatis+MQ+VR全景+b2b2c bbc

​ 1. 涉及平台 平台管理、商家端&#xff08;PC端、手机端&#xff09;、买家平台&#xff08;H5/公众号、小程序、APP端&#xff08;IOS/Android&#xff09;、微服务平台&#xff08;业务服务&#xff09; 2. 核心架构 Spring Cloud、Spring Boot、Mybatis、Redis 3. 前…

Kali搭建Suricata环境及使用方式

这个和上一个snort如出一辙&#xff0c;并且兼容snort的规则&#xff0c;有一个有的没的我就不赘述了&#xff0c;直接开整&#xff01; 开整&#xff01; 0x01 环境0x02 配置0x03 使用 0x01 环境 kali2021 && suricata apt install suricata #安装 suricata-updat…

【雕爷学编程】MicroPython动手做(28)——物联网之Yeelight 5

知识点&#xff1a;什么是掌控板&#xff1f; 掌控板是一块普及STEAM创客教育、人工智能教育、机器人编程教育的开源智能硬件。它集成ESP-32高性能双核芯片&#xff0c;支持WiFi和蓝牙双模通信&#xff0c;可作为物联网节点&#xff0c;实现物联网应用。同时掌控板上集成了OLED…

远程仓库的操作

一、远程仓库的操作命令 git remote # 查看当前项目关联的远程库 我事先关联了一个GitHub的远程仓库&#xff0c;关于如何关联远程仓库&#xff0c;可以看这篇文章远程仓库GitHub和Gitee_林涧泣的博客-CSDN博客 git remote add [仓库服务器名] [远程仓库地址] # 关联远程仓库…

天气API强势对接

&#x1f935;‍♂️ 个人主页&#xff1a;香菜的个人主页&#xff0c;加 ischongxin &#xff0c;备注csdn ✍&#x1f3fb;作者简介&#xff1a;csdn 认证博客专家&#xff0c;游戏开发领域优质创作者,华为云享专家&#xff0c;2021年度华为云年度十佳博主 &#x1f40b; 希望…

【深度学习】SMILEtrack: SiMIlarity LEarning for Multiple Object Tracking,论文

论文&#xff1a;https://arxiv.org/abs/2211.08824 代码&#xff1a;https://github.com/WWangYuHsiang/SMILEtrack 文章目录 AbstractIntroductionRelated WorkTracking-by-DetectionDetection methodData association method Tracking-by-Attention Methodology架构概述外观…

汽配企业为什么需要MES管理系统解决方案

众所周知&#xff0c;汽配组装是汽车制造的关键环节&#xff0c;而汽配行业变革以精益为终极目标。制造业要想脱颖而出&#xff0c;就需要采用MES生产管理系统&#xff0c;以实现制造、物流、质量的精益化管理。在快速的流水线节拍生产下&#xff0c;汽配MES管理系统不仅提高了…

备忘录模式——撤销功能的实现

1、简介 1.1、概述 备忘录模式提供了一种状态恢复的实现机制&#xff0c;使得用户可以方便地回到一个特定的历史步骤。当新的状态无效或者存在问题时&#xff0c;可以使用暂时存储起来的备忘录将状态复原。当前很多软件都提供了撤销&#xff08;Undo&#xff09;操作&#xf…

Mybatis引出的一系列问题-Mybatis缓存机制的探究

Mybatis 使用到了两种缓存&#xff1a;本地缓存&#xff08;local cache&#xff09;和二级缓存&#xff08;second level cache&#xff09;。 一级缓存默认是开启的&#xff0c;而且不能关闭&#xff0c;MyBatis的一些关键特性&#xff08;例如通过<association>和<…