当前位置: 首页 > 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、适配器模式 适配器模式是作为两个不兼容的接口之间的桥梁。这种…...

基于ELK的口罩检测日志分析与可视化

基于ELK的口罩检测日志分析与可视化 1. 引言 在公共场所部署口罩检测系统后&#xff0c;我们面临着一个新的挑战&#xff1a;如何实时监控系统运行状态、快速定位问题、并优化检测性能&#xff1f;传统的日志查看方式已经无法满足需求&#xff0c;我们需要一个能够集中管理、…...

基于FPGA的伺服驱动系统:电流环控制与多环路反馈、SVPWM及编码器协议实现的研究

伺服驱动FPGA电流环&#xff0c;包含坐标变换&#xff0c;电流环&#xff0c;速度环&#xff0c;位置环&#xff0c;电机反馈接口&#xff0c;SVPWM&#xff0c;编码器协议&#xff0c;电流环和编码器协议都是FPGA里实现的伺服驱动系统里玩FPGA可不是闹着玩的&#xff0c;尤其是…...

显卡驱动彻底清理指南:用DDU解决90%的显示问题

显卡驱动彻底清理指南&#xff1a;用DDU解决90%的显示问题 【免费下载链接】display-drivers-uninstaller Display Driver Uninstaller (DDU) a driver removal utility / cleaner utility 项目地址: https://gitcode.com/gh_mirrors/di/display-drivers-uninstaller 当…...

ESXi 重置密码详细攻略(全场景覆盖)

本文详细覆盖 ESXi 所有常见场景的密码重置方法&#xff0c;包括「知道原密码改新密码」「忘记root密码(无vCenter)」「有vCenter管理(企业版)」&#xff0c;步骤拆解到每一步点击和命令输入&#xff0c;适配 ESXi 5.x/6.x/7.x/8.x 全版本&#xff0c;兼顾官方支持方法和实用非…...

使用Cosmos-Reason1-7B分析网络协议交互逻辑:以TCP三次握手为例

使用Cosmos-Reason1-7B分析网络协议交互逻辑&#xff1a;以TCP三次握手为例 最近在尝试用大模型来理解一些复杂的系统交互逻辑&#xff0c;发现了一个挺有意思的用法。我们团队在测试Cosmos-Reason1-7B时&#xff0c;没有让它写代码或者生成文案&#xff0c;而是给了它一个更“…...

从Gazebo到真实硬件:robot_state_publisher在ROS 2仿真迁移中的5个关键配置项

从Gazebo到真实硬件&#xff1a;robot_state_publisher在ROS 2仿真迁移中的5个关键配置项 当你在Gazebo中完成机器人运动算法的仿真验证后&#xff0c;下一步就是将这套系统部署到真实硬件上。这个过程中&#xff0c;robot_state_publisher的配置往往是工程师们最容易踩坑的环节…...

CasRel在智能问答系统中的落地实践:为QA引擎注入结构化事实支撑

CasRel在智能问答系统中的落地实践&#xff1a;为QA引擎注入结构化事实支撑 1. 引言&#xff1a;当问答系统遇到关系抽取 想象一下这样的场景&#xff1a;用户向智能问答系统提问"苹果公司的CEO是谁&#xff1f;"&#xff0c;系统需要快速准确地回答"蒂姆库克…...

AI赋能:让快马平台解析21届智能车赛规则并生成智能算法代码

最近在准备21届智能车比赛时&#xff0c;发现今年的赛道规则特别复杂&#xff0c;各种新加入的元素和评分标准让人有点头大。正好尝试用InsCode(快马)平台的AI辅助开发功能来帮忙解析规则并生成算法代码&#xff0c;整个过程意外地顺利&#xff0c;分享下具体实现思路。 规则文…...

保姆级教程:在RK3588上交叉编译Qt 5.15.15(含完整配置流程)

保姆级教程&#xff1a;在RK3588上交叉编译Qt 5.15.15&#xff08;含完整配置流程&#xff09; 在嵌入式开发领域&#xff0c;RK3588作为一款高性能的ARM处理器&#xff0c;正逐渐成为智能终端设备的首选平台。而Qt框架凭借其跨平台特性和丰富的GUI组件&#xff0c;为嵌入式界面…...

私域数据安全与合规——企微引流必须注意的5个技术红线

做公域引流到企微&#xff0c;数据安全和合规是技术团队必须重视的问题。一旦踩红线&#xff0c;轻则功能受限&#xff0c;重则企微封禁甚至法律风险。今天梳理5个技术红线及应对方案。红线1&#xff1a;用户隐私数据存储企微API返回的用户信息包含ExternalUserID&#xff08;外…...