当前位置: 首页 > news >正文

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

背景说明 

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.valueif (!this.item) returnthis.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>

相关文章:

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

背景说明 uni-app 官方的插件市场有数据驱动选择器&#xff0c;可以用作多级分类的场景。引入插件后&#xff0c;发现做不到只选择年级&#xff0c;不选择班级&#xff08;似乎&#xff0c;只能到最后子节点了&#xff09;。 需求中&#xff0c;有可能选择的不是叶子。比如&a…...

网络入侵探测器Pi.Alert

什么是 Pi.Alert &#xff1f; Pi.Alert 是 WIFI/LAN 入侵探测器。通过扫描连接到您的 WIFI/LAN 的设备&#xff0c;提醒您未知设备的连接。它还警告断开“始终连接”的设备。 Pi.Alert 使用了三种扫描方式 方式1&#xff1a;arp-scan。arp扫描系统实用程序用于使用 arp 帧搜索…...

Flask项目打包为exe(附带项目资源,静态文件)

1.在项目根目录创建my_app.spec文件&#xff0c;内容如下&#xff1a; # -*- mode: python ; coding: utf-8 -*-block_cipher Nonea Analysis([server.py], # flask入口pathex[],binaries[], datas[("E:/**/templates","/templates"),("E:/**/s…...

无代码开发(BIP旗舰版-YonBuilder)

目录 我的应用 新建领域 菜单管理 应用构建 新建应用 对象建模 新增业务对象 新增业务实体 页面建模 新增页面 编辑页面 发布管理 我的应用 角色管理 yonbuilder开发平台&#xff0c;提供标准服务和专业开发服务&#xff1b; 本篇文章只演示标准服务的可视化应用…...

誉天程序员-瀑布模型-敏捷开发模型-DevOps模型比较

文章目录 2. 项目开发-开发方式2.1. 瀑布开发模型2.2. 敏捷开发模型2.3. DevOps开发模型2.4. 区别 自增主键策略1、数据库支持主键自增自增和uuid方案优缺点 2. 项目开发-开发方式 由传统的瀑布开发模型、敏捷开发模型&#xff0c;一跃升级到DevOps开发运维一体化开发模型。 …...

flutter:占位视图(骨架屏、shimmer)

前言 有时候打开美团&#xff0c;在刚加载数据时会显示一个占位视图&#xff0c;如下&#xff1a; 那么这个是如何实现的呢&#xff1f;我们可以使用shimmer来开发该功能 实现 官方文档 https://pub-web.flutter-io.cn/packages/shimmer 安装 flutter pub add shimmer示例…...

【雕爷学编程】MicroPython动手做(30)——物联网之Blynk 4

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

python-网络爬虫.BS4

BS4 Beautiful Soup 是一个可以从HTML或XML文件中提取数据的Python库&#xff0c; 它能够通过你喜欢的转换器实现惯用的文档导航、查找、修改文档的方 式。 Beautiful Soup 4 官方文档&#xff1a;https://www.crummy.com/software/BeautifulSoup/bs4/doc.zh/ 帮助手册&…...

C# 开发规范

控件命名规则 控件名简写 控件名简写LabellblTextBoxtxtButtonbtnLinkButtonlnkbtnImageButtonimgbtnDropDownListddlListBoxlstDataGriddgDataListdlCheckBoxchkCheckBoxListchklsRadioButtonrdoRadioButtonListrdoltImageimgPanelpnlCalendecldAdRotatorarTabletblRequiredF…...

【uniapp 样式】使用setStorageSync存储历史搜索记录

<template><view><view class"zhuangbox u-flex"><u--inputplaceholder"请输入关键字搜索"border"surround"shapecircleprefixIcon"search"prefixIconStyle"font-size: 22px;color: #909399"v-model&q…...

git remote add origin详解

git remote add origin详解_笔记大全_设计学院 一、git remote add origin的基础 使用“git remote add origin”指令&#xff0c;可以轻松地将本地项目连接到远程Git仓库 二、git remote add origin的用法 “git remote add origin”指令可以使用以下语法&#xff1a; git…...

附录1-将uni-app运行到微信开发者工具

目录 1 在manifest.json写入AppID 2 配置微信开发者工具的安装路径 3 微信开发者工具的安全设置 4 运行 5 修改一些配置项 1 在manifest.json写入AppID 2 配置微信开发者工具的安装路径 如果你忘了安装在哪里了&#xff0c;可以右键快捷方式看一下属性 在运行设置…...

【LeetCode】根据二叉树创建字符串

根据二叉树创建字符串 题目描述算法分析编程代码 链接: 根据二叉树创建字符串 题目描述 算法分析 当单纯的按照前序遍历输出后&#xff0c;我们只要对&#xff08;&#xff09;进行一些修改就好 编程代码 /*** Definition for a binary tree node.* struct TreeNode {* …...

【图论】强连通分量

一.定义 强连通分量&#xff08;Strongly Connected Components&#xff0c;简称SCC&#xff09;是图论中的一个概念&#xff0c;用于描述有向图中的一组顶点&#xff0c;其中任意两个顶点之间都存在一条有向路径。换句话说&#xff0c;对于图中的任意两个顶点u和v&#xff0c;…...

网络:VRP介绍

1. VRP 华为使用的通用路由平台&#xff0c;华为的交换机、防火墙、安全设备、无线和路由器的命令行几乎一样。 2. VRP分为用户视图、系统视图。 3. 用户视图 user view <Huawei>&#xff1a;其中<>代表的是用户视图&#xff0c;Huawei是设备的名称。命令比较少。…...

iOS - 解压ipa包中的Assert.car文件

项目在 Archive 打包后&#xff0c;生成ipa包 将 xxx.ipa文件修改为zip后缀即 xxx.zip &#xff0c;然后再双击解压&#xff0c;会生成一个 Payload 文件夹&#xff0c;里面一个文件 如下图&#xff1a; 然后显示改文件的包内容&#xff1a; 解压 Assets.car 文件的方式&…...

【Jmeter】配置不同业务请求比例,应对综合场景压测

目录 前言 Jmeter5.0新特性 核心改进 其他变化 资料获取方法 前言 Jmeter 5.0这次的核心改进是在许多地方改进了对 Rest 的支持&#xff0c;此外还有调试功能、录制功能的增强、报告的改进等。 我也是因为迁移到了Mac&#xff0c;准备在Mac上安装Jmeter的时候发现它已经…...

TCP拥塞控制详解 | 1. 概述

网络传输问题本质上是对网络资源的共享和复用问题&#xff0c;因此拥塞控制是网络工程领域的核心问题之一&#xff0c;并且随着互联网和数据中心流量的爆炸式增长&#xff0c;相关算法和机制出现了很多创新&#xff0c;本系列是免费电子书《TCP Congestion Control: A Systems …...

使用IPSEC VPN 在有防火墙的场景和有NAT转换的场景下实现隧道通信实验

目录 一、在有防火墙的场景 1、为所有设备配置对应ip地址&#xff1a; 2、进入两个防火墙实现公网互通 3、测试公网是否互通 4、进入SW1配置IPSEC VPN 5、进入SW2配置IPSEC VPN 6、配置策略方向ESP的流量 7、尝试使用PC1访问PC2 二、在有NAT地址转换的场景 1、为新增加…...

Go和Java实现适配器模式

Go和Java实现适配器模式 我们通过下面的实例来演示适配器模式的使用&#xff0c;其中&#xff0c;音频播放器设备只能播放 mp3 文件&#xff0c;通过使用一个更高级 的音频播放器来播放 vlc 和 mp4 文件。 1、适配器模式 适配器模式是作为两个不兼容的接口之间的桥梁。这种…...

Yokogawa AAI835-H50/K4A00模拟输入/输出模块

Yokogawa AAI835-H50/K4A00 模拟输入/输出模块产品特点&#xff1a;通道配置&#xff1a;共8个通道&#xff0c;含4路模拟输入和4路模拟输出。信号类型&#xff1a;所有通道均支持4-20mA标准电流信号。HART通信&#xff1a;支持HART协议&#xff0c;可与智能现场设备双向数字通…...

环境光遮蔽(Ambient Occlusion):揭秘那个让虚拟世界“有重量感“的阴影魔法

一、一个让我"开窍"的老木匠故事 我有个朋友是传统家具的修复师&#xff0c;他给我讲过一个让我至今难忘的故事。他说他刚入行时跟着一位 70 多岁的老木匠师父学习——师父让他做的第一件事不是雕花、不是榫卯——而是"看阴影"——这个看似奇怪的训练改变了…...

如何让Rhino 3D模型在Blender中保持完整数据:import_3dm插件深度解析

如何让Rhino 3D模型在Blender中保持完整数据&#xff1a;import_3dm插件深度解析 【免费下载链接】import_3dm Blender importer script for Rhinoceros 3D files 项目地址: https://gitcode.com/gh_mirrors/im/import_3dm 当建筑师需要在Blender中渲染Rhino设计的建筑模…...

通过TaotokenCLI工具一键配置开发环境接入参数

&#x1f680; 告别海外账号与网络限制&#xff01;稳定直连全球优质大模型&#xff0c;限时半价接入中。 &#x1f449; 点击领取海量免费额度 通过Taotoken CLI工具一键配置开发环境接入参数 对于需要接入多个大模型服务的开发者而言&#xff0c;手动配置每个项目的API密钥、…...

别再把大模型当搜索框了:一文讲透 LLM 的基本原理、能力边界与局限性

写在前面很多人把大语言模型当成“会聊天的搜索引擎”&#xff0c;结果一上线就遇到幻觉、口径不稳、上下文丢失、成本失控。真正理解 LLM&#xff0c;要先抓住一句话&#xff1a;它是基于 Transformer 的概率生成模型&#xff0c;核心能力来自海量预训练、上下文学习与后训练对…...

将deepseek v4 pro集成到codex桌面APP中使用

&#x1f4d5;我是廖志伟&#xff0c;一名Java开发工程师、《Java项目实战——深入理解大型互联网企业通用技术》&#xff08;基础篇&#xff09;、&#xff08;进阶篇&#xff09;、《解密程序员的思维密码——沟通、演讲、思考的实践》作者、清华大学出版社签约作家、Java领域…...

公共卫生机器学习项目中的算法公平性实践:ACAR框架详解

1. 项目概述&#xff1a;当机器学习遇见公共卫生&#xff0c;公平性为何成为“必答题”&#xff1f;在公共卫生领域&#xff0c;机器学习&#xff08;ML&#xff09;正以前所未有的速度渗透到疾病监测、风险分层和资源分配等核心环节。想象一下&#xff0c;一个模型被用来预测某…...

基于Shapley值与随机森林的印度CPI通胀预测与特征重要性分析

1. 项目概述与核心价值在宏观经济预测领域&#xff0c;通胀预测的准确性直接关系到货币政策制定、市场预期管理乃至社会民生稳定。传统的计量经济学模型&#xff0c;如基于菲利普斯曲线的线性回归&#xff0c;虽然具有良好的可解释性&#xff0c;但在捕捉现实世界中复杂、非线性…...

当“画笔”变成“画笔”,世界便不再扁平:上海科技大学师玉娇团队 BevSplat 论文深度解读

用高斯画笔为地面图像“补上高度”&#xff0c;让卫星图片与街景的配对不再尴尬 想象一下这幅情境&#xff1a;一辆自动驾驶汽车在密集的城市楼群中行驶。GPS 信号被摩天大楼遮挡得断断续续&#xff0c;车辆根本无法准确知道自己的位置。于是&#xff0c;它需要一种备用方案&am…...

Office RibbonX Editor:5分钟学会定制你的Office功能区界面

Office RibbonX Editor&#xff1a;5分钟学会定制你的Office功能区界面 【免费下载链接】office-ribbonx-editor An overhauled fork of the original Custom UI Editor for Microsoft Office, built with WPF 项目地址: https://gitcode.com/gh_mirrors/of/office-ribbonx-e…...