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>

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

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

相关文章

适应于Linux系统的三种安装包格式 .tar.gz、.deb、rpm

deb、rpm、tar.gz三种Linux软件包的区别 rpm包-在红帽LINUX、SUSE、Fedora可以直接进行安装&#xff0c;但在Ubuntu中却无法识别&#xff1b; deb包-是Ubuntu的专利&#xff0c;在Ubuntu中双击deb包就可以进入自动安装进程&#xff1b; tar.gz包-在所有的Linux版本中都能使用…

Host/ KVM/ Docker/ K8s/ OpenStack/ Mesos简单介绍和区别

Host/ KVM/ Docker/ Kubernetes/ OpenStack 和 Mesos 的简单介绍&#xff1a; - Host&#xff1a; Host 是指物理服务器或虚拟机主机&#xff0c;它们可以运行多个虚拟机或容器来提供计算和存储资源。Host 是云计算和容器化技术中的基本组成部分。 - KVM&#xff1a; KVM 是…

2023 8-2 ~ 8-3

2181 合并0之间的节点 思路挺简单 就是注意一下指针不要制空 /*** Definition for singly-linked list.* struct ListNode {* int val;* ListNode *next;* ListNode() : val(0), next(nullptr) {}* ListNode(int x) : val(x), next(nullptr) {}* ListNod…

【Docker】Docker+Zipkin+Elasticsearch+Kibana部署分布式链路追踪

文章目录 1. 组件介绍2. 服务整合2.1. 前提&#xff1a;安装好Elaticsearch和Kibana2.2. 再整合Zipkin 点击跳转&#xff1a;Docker安装MySQL、Redis、RabbitMQ、Elasticsearch、Nacos等常见服务全套&#xff08;质量有保证&#xff0c;内容详情&#xff09; 本文主要讨论在Ela…

opencv rtsp 硬件解码

讨论使用opencv的reader 硬件解码的方案有太多种&#xff0c;如果使用ffmpeg硬件解码是最方便的&#xff0c;不方便的是把解码过后的GPU 拉到 CPU 上&#xff0c;再使用opencv的Mat 从cpu 上上载到gpu上&#xff0c;是不是多了两个过程&#xff0c;应该是直接从GPU mat 直接去…

c# COM组件原理

COM&#xff08;Component Object Model&#xff09;是一种微软的软件组件技术&#xff0c;用于实现软件组件之间的互操作性。它是一种二进制接口标准&#xff0c;允许不同的软件组件在不同的进程中进行通信。COM组件可以用多种编程语言编写&#xff0c;并且可以在多个应用程序…

rust报错“Utf8Error { valid_up_to: 1, error_len: Some(1) } }”

这个错误通常表示在尝试将字节序列解码为UTF-8字符时出现问题。它指出在索引1处发现了无效的字节序列&#xff0c;并且错误的长度为1个字节。 要解决这个问题&#xff0c;你可以尝试以下几种方法&#xff1a; 检查你的输入数据是否包含无效的字节序列。你可以使用一些调试工具…

node npm 一些小工具

1.npm nrm 换源 npm i -g nrmnrm 其实就是 NPM registry manager&#xff0c;管理 NPM 源的命令行工具。 $ nrm lsnpm ---------- https://registry.npmjs.org/yarn --------- https://registry.yarnpkg.com/tencent ------ https://mirrors.cloud.tencent.com/npm/cnpm -----…

洛谷 P1613 跑路 Floyd

原题链接&#xff1a; 跑路 - 洛谷 解题思路&#xff1a; 如果u到v之间有一条长度为2^t的路径&#xff0c;那就把dis[u][v]改为1&#xff0c;所以我们先结合倍增法跑一遍floyd&#xff0c;得到新图&#xff0c;然后在新图上再跑一次最短路&#xff0c;这次可以用任何的最短路…

数实融合 产业共创 | 竹云受邀出席“2023湾区数字科技50人论坛”

7月29日&#xff0c;“2023湾区数字科技50人论坛”在深圳湾科技生态园圆满举行&#xff01;本届论坛由深圳市科学技术协会指导&#xff0c;中国鲲鹏产业源头创新中心、湾盟产业创新服务中心主办&#xff0c;深圳市金融攻关基地、广东赛迪工业和信息化研究院、香港科技大学深港协…

MySQL数据库备份与恢复

在任何数据库环境中&#xff0c;总会有不确定的意外情况发生&#xff0c;比如停电&#xff0c;计算机系统的各种软硬件故障&#xff0c;认为破坏&#xff0c;管理员误操作等是不可避免的&#xff0c;这些情况可能会导致 数据的丢失&#xff0c; 服务器瘫痪 等严重后果。存在多个…

STM32CubeMX配置定时器PWM--保姆级教程

———————————————————————————————————— ⏩ 大家好哇&#xff01;我是小光&#xff0c;嵌入式爱好者&#xff0c;一个想要成为系统架构师的大三学生。 ⏩最近在开发一个STM32H723ZGT6的板子&#xff0c;使用STM32CUBEMX做了很多驱动&#x…

android NFC 从0到一

NFC intent action ACTIVITY_INTENT_ACTION 类型 作用 优先级 ACTION_NDEF_DISCOVERED 标签中含有NDEF数据且为公认类型 高 ACTION_TECH_DISCOVERED 标签中没有NDEF数据却是已定义的标签技术 中 ACTION_TAG_DISCOVERED 前两个action都没有启动&#xff0c…

【Python】从同步到异步多核:测试桩性能优化,加速应用的开发和验证

目录 测试工作中常用到的测试桩mock能力 应用场景 简单测试桩 http.server扩展&#xff1a;一行命令实现一个静态文件服务器 性能优化&#xff1a;使用异步响应 异步响应 能优化&#xff1a;利用多核 gunicorn 安装 gunicorn 使用 gunicorn 启动服务 性能优化&#…

Spring Boot 常见的底层注解剖析

Spring Boot 是一个用于创建独立的、基于Spring框架的Java应用程序的框架。它提供了许多注解&#xff0c;用于配置和定制应用程序的行为。以下是一些常见的Spring Boot底层注解的剖析&#xff1a; 常见的Spring Boot底层注解的剖析 SpringBootApplication&#xff1a;这是一个…

/lib/x86_64-linux-gnu/libc.so.6: version `GLIBC_2.28‘ not found

某项目中&#xff0c;我要给别人封装一个深度学习算法的SDK接口&#xff0c;运行在RK3588平台上&#xff0c;然后客户给我的交叉编译工具链是 然后我用他们给我的交叉编译工具链报下面的错误&#xff1a; aarch64-buildroot-linux-gnu-gcc --version /data/chw/aarch64/bin/cca…

使用idea实现git操作大全(在项目开发中遇到的实际情况

使用idea实现git操作大全&#xff08;在项目开发中遇到的实际情况&#xff09; 1.安装git插件2.在开发中切记拉一个自己的分支 1.安装git插件 2.在开发中切记拉一个自己的分支 选中需要拉的分支&#xff0c;右键该分支&#xff0c;选中new breach from “分支”&#xff0c;点…

Permute 3 for mac音视频格式转换

Permute是一款Mac平台上的媒体格式转换软件&#xff0c;由Chaotic Software开发。它可以帮助用户快速地将各种音频、视频和图像文件转换成所需格式&#xff0c;并提供了一些常用工具以便于用户进行编辑和处理。 Permute的主要特点包括&#xff1a; - 支持大量格式&#xff1a;支…

小程序安全性加固:如何保护用户数据和防止恶意攻击

第一章&#xff1a;引言 在当今数字化时代&#xff0c;移动应用程序的使用已经成为人们日常生活中的重要组成部分。小程序作为一种轻量级的应用程序形式&#xff0c;受到了广泛的欢迎。然而&#xff0c;随着小程序的流行&#xff0c;安全性问题也日益凸显。用户数据泄露和恶意攻…

flask中写一个基础的sqlHelper类

写一个SQLHelper类&#xff1a; from flask_sqlalchemy import SQLAlchemydb SQLAlchemy()class SQLHelper:staticmethoddef add(record):db.session.add(record)return SQLHelper.session_commit()staticmethoddef add_all(records):db.session.add_all(records)return SQLH…