uniapp自定义树型结构数据弹窗,给默认选中的节点,禁用所有子节点
兼容H5、安卓App、微信小程序
实现逻辑:给默认选中节点的所有子节点添加一个disabled属性,以此禁用子节点。
/components/sonTreeNode/sonTreeNode.vue 封装成组件
<template><view><view :class="['item',item.is_level==1?'pL1':item.is_level==2?'pL2':'pL3']" v-for="(item, index) in treeList":key="index"><view class="item--row" @click.stop="handleOpenClose(item, index)"><view class="icon-box"><u-icon :name="item.isOpen?'arrow-down-fill':'arrow-up-fill'" size="12" color="#a8abb2"v-if="item.children && item.children.length"></u-icon></view><view class="checkbox-box"><u-checkbox-group><u-checkbox :disabled="item.disabled" :activeColor="themeColor" :label="item.name":name="item.id" :checked='item.checked' usedAlone @change="changeCheckbox($event,item)" /></u-checkbox-group></view></view><!-- 使用组件本身渲染子项 --><view v-if="item.isOpen && item.children && item.children.length"><treeItem :list="item.children"></treeItem></view></view></view>
</template><script>// 引入当前组件import treeItem from '../sonTreeNode/sonTreeNode'let activeTreeList = []export default {name: 'treeItem',components: {treeItem},// 接收列表数据props: {list: {type: Array,default: () => []},checkedId: {type: Array,default: () => []},},data() {return {themeColor: this.$themeColor,treeList: [],}},mounted() {this.setListUpOpen(this.list)this.treeList = this.listif (activeTreeList.length == 0) {activeTreeList = this.list}},methods: {// 全部展开setListUpOpen(list, isOpen = true) {list.forEach(item => {item.isOpen = isOpen// 数据回显,选中当前checked和禁用子节点 Startif (this.checkedId.includes(item.id)) {item.checked = truefunction setSonDisabled(son) {son.forEach(v => {v.disabled = trueif (v?.children?.length > 0) {setSonDisabled(v.children)}})}if (item?.children?.length > 0) {setSonDisabled(item.children)}}// Endif (item?.children?.length > 0) {this.setListUpOpen(item.children)}})return list},// 处理展开或收起handleOpenClose(item, index) {// 如果不存在isOpen属性就添加该属性。if (!item.hasOwnProperty('isOpen')) {item.isOpen = false}item.isOpen = !item.isOpenthis.$forceUpdate()},// 禁用子节点disableNode(node, disabled) {node.forEach(item => {item.checked = falseitem.disabled = disabledif (item?.children?.length > 0) {this.disableNode(item.children, disabled)}})return node},setAssign(node, child) {node.forEach(item => {child.forEach(v => {if (item.id == v.id) {if (v.hasOwnProperty('checked')) {item.checked = v.checked}item.children = v.children}})if (item?.children?.length > 0) {this.setAssign(item.children, child)}})return node},changeCheckbox(isChecked, item) {let isHasChild = item?.children?.length > 0let oldTreeList = this.treeListif (isChecked) {item.checked = trueif (isHasChild) {this.disableNode(item.children, true)}} else {item.checked = falseif (isHasChild) {this.disableNode(item.children, false)}}activeTreeList = this.setAssign(activeTreeList, oldTreeList)if (isHasChild) {// #ifdef H5 ||APP-PLUSthis.treeList = []this.$nextTick(() => {this.treeList = oldTreeList})// #endif// #ifdef MP-WEIXINthis.loadTreeList()// #endif}},getActiveTreeList() {return activeTreeList},cleatActiveTreeList() {activeTreeList = []},}}
</script><style scoped lang="scss">.pL1 {padding-left: 10rpx;}.pL2 {padding-left: 20rpx;}.pL3 {padding-left: 30rpx;}.item {margin-bottom: 15rpx;.item--row {display: flex;align-items: center;margin-bottom: 20rpx;.icon-box {width: 30rpx;}.checkbox-box {}}}
</style>
data.js 定义树形结构数据
const treeList = [{"id": 8,"name": "2栋","pid": 0,"children": [{"id": 31,"name": "C单元","pid": 8,"children": []},{"id": 30,"name": "B单元","pid": 8,"children": []},{"id": 13,"name": "A单元","pid": 8,"children": []}]},{"id": 9,"name": "3栋","pid": 0,"children": [{"id": 27,"name": "B单元","pid": 9,"children": [{"id": 28,"name": "6楼","pid": 27,}]},{"id": 14,"name": "A单元","pid": 9,"children": []}]},{"id": 11,"name": "4栋","pid": 0,"children": [{"id": 29,"name": "B单元","pid": 11,"children": []},{"id": 18,"name": "A单元","pid": 11,"children": [{"id": 53,"name": "22222","pid": 18,}]}]},{"id": 7,"name": "1栋","pid": 0,"children": [{"id": 67,"name": "A单元","pid": 7,"children": []},{"id": 66,"name": "B单元","pid": 7,"children": []},{"id": 65,"name": "C单元","pid": 7,"children": []},]}
]export default treeList
页面文件
<template><view class=""><u-button type="primary" @click="openPopup()">打开弹窗</u-button><u-popup :show="showPopup" mode="bottom" :round="20" closeable @close="closePopup" :closeOnClickOverlay="false"><view class="popup-wrap"><view class="popup-title">选择子项目</view><view class="popup-content"><sonTreeNode :list="treeList" ref="sonTreeNodeRef" :checkedId="checkedId"v-if="treeList.length>0" /></view><view class="popup-footer"><view class="btn-box1"><u-button @click="closePopup()">取消</u-button></view><view class="btn-box2"><u-button type="primary" @click="confirmPopup()">确定</u-button></view></view></view></u-popup></view>
</template><script>import Vue from 'vue'import sonTreeNode from '@/packageD/components/sonTreeNode/sonTreeNode.vue'import treeList from "./data.js"export default {components: {sonTreeNode},data() {return {treeList: [],showPopup: false,checkedId: [13, 18, 7, 28]};},onLoad() {},onUnload() {// #ifdef MP-WEIXINthis.clearInstance()// #endif},mounted() {// #ifdef MP-WEIXINVue.prototype.loadTreeList = this.loadTreeList;// #endif},methods: {clearInstance() {// 清除实例的逻辑this.$delete(Vue.prototype, 'loadTreeList');},loadTreeList() {this.$refs.sonTreeNodeRef.treeList = []this.$nextTick(() => {this.$refs.sonTreeNodeRef.treeList = this.$refs.sonTreeNodeRef.getActiveTreeList()})},openPopup(item, index) {this.treeList = treeListthis.showPopup = true},confirmPopup() {let treeList = this.$refs.sonTreeNodeRef.treeListconsole.log("选中的id=", this.getCheckedIdArr(treeList));this.checkedId = this.getCheckedIdArr(treeList)this.closePopup()},closePopup() {this.$refs.sonTreeNodeRef.cleatActiveTreeList()this.showPopup = falsethis.treeList = []},getCheckedIdArr(node, arr = []) {node.forEach(item => {if (item.checked) {arr.push(item.id)}if (item?.children?.length > 0) {this.getCheckedIdArr(item.children, arr)}})return arr},},}
</script><style lang="scss" scoped>.popup-wrap {padding: 20rpx 40rpx;.popup-title {font-size: 36rpx;text-align: center;}.popup-content {margin-top: 20rpx;height: 800rpx;overflow-y: auto;}.popup-footer {display: flex;justify-content: space-between;.btn-box1,.btn-box2 {width: 48%;}}}
</style>
效果图
相关文章:
uniapp自定义树型结构数据弹窗,给默认选中的节点,禁用所有子节点
兼容H5、安卓App、微信小程序 实现逻辑:给默认选中节点的所有子节点添加一个disabled属性,以此禁用子节点。 /components/sonTreeNode/sonTreeNode.vue 封装成组件 <template><view><view :class"[item,item.is_level1?pL1:item…...
方正畅享全媒体新闻采编系统 screen.do SQL注入漏洞复现
0x01 产品简介 方正畅享全媒体新闻生产系统是以内容资产为核心的智能化融合媒体业务平台,融合了报、网、端、微、自媒体分发平台等全渠道内容。该平台由协调指挥调度、数据资源聚合、融合生产、全渠道发布、智能传播分析、融合考核等多个平台组成,贯穿新闻生产策、采、编、发…...
5G 模组 RG500Q常用AT命令
5G 模组 RG500Q常用AT命令 5G 模组 RG500Q常用AT命令 at ATQNWPREFCFG\"mode_pref\",nr5g && sleep 1 at ATQNWPREFCFG\"nr5g_band\",79 && sleep 1 at atqnwlock\"commo…...
day38-SSH安全登录
机器准备 什么是SSH SSH 或 Secure Shell 协议是一种远程管理协议,允许用户通过 Internet 访问、控制和修改其远程服务器。 SSH 服务是作为未加密 Telnet 的安全替代品而创建的,它使用加密技术来确保进出远程服务器的所有通信都以加密方式进行。 SS…...
U盘出现USBC乱码文件的全面解析与恢复指南
一、乱码现象初探:USBC乱码文件的神秘面纱 在数字时代,U盘已成为我们日常生活中不可或缺的数据存储工具。然而,当U盘中的文件突然变成乱码,且文件名前缀显示为“USBC”时,这无疑给用户带来了极大的困扰。这些乱码文件…...
mac iterm2 使用 lrzsz
前言 mac os 终端不支持使用 rz sz 上传下载文件,本文提供解决方法。 mac 上安装 brew install lrzsz两个脚本 注意:/usr/local/bin/iterm2-send-zmodem.sh 中的 sz命令路径要和你mac 上 sz 命令路径一致。 /usr/local/bin/iterm2-recv-zmodem.sh 中…...
京东大数据治理探索与实践 | 京东零售技术实践
01背景和方案 在当今的数据驱动时代,数据作为关键生产要素之一,其在商业活动中的战略价值愈加凸显,京东也不例外。 作为国内领先的电商平台,京东在数据基础设施上的投入极为巨大,涵盖数万台服务器、数 EB 级存储、数百…...
应该连续学一个科目,还是多学科切换?
https://www.zhihu.com/question/333420829https://www.zhihu.com/question/333420829...
游戏何如防抓包
游戏抓包是指在游戏中,通过抓包工具捕获和分析游戏客户端与服务器之间传输的封包数据的过程。抓包工具可实现拦截、篡改、重发、丢弃游戏的上下行数据包,市面上常见的抓包工具有WPE、Fiddler和Charles Proxy等。 抓包工具有两种实现方式,一类…...
asp.net core发布配置端口号,支持linux
方式一,修改配置文件 appsettings.json 找到文件 appsettings.json, 添加如下节点配置,在linux环境需要设置0.0.0.0才可以正常代表本机,然后被其他机器访问,此处设置端口8000, "Kestrel": {&quo…...
基于linux下实现的ping程序(C语言)
linux下实现的ping程序 一、设计目的 PING程序是我们使用的比较多的用于测试网络连通性的程序。PING程序基于ICMP,使用ICMP的回送请求和回送应答来工作。由计算机网络课程知道,ICMP是基于IP的一个协议,ICMP包通过IP的封装之后传递。 课程设…...
109.【C语言】数据结构之求二叉树的高度
目录 1.知识回顾:高度(也称深度) 2.分析 设计代码框架 返回左右子树高度较大的那个的写法一:if语句 返回左右子树高度较大的那个的写法二:三目操作符 3.代码 4.反思 问题 出问题的代码 改进后的代码 执行结果 1.知识回顾…...
线段覆盖(c++)
题目描述 在一条数轴上,有 N 条线段,第 i 条线段的左端点是 si,右端点是 ei。如果线段有重叠(即使是端点重叠也算是重叠),则输出 “impossible”, 如果没有重叠则输出 “possible” 。 输入格式 多组…...
SSM 仓库管理系统
🥂(❁◡❁)您的点赞👍➕评论📝➕收藏⭐是作者创作的最大动力🤞 💖📕🎉🔥 支持我:点赞👍收藏⭐️留言📝欢迎留言讨论 🔥🔥&…...
基于Python3编写的Golang程序多平台交叉编译自动化脚本
import argparse import os import shutil import sys from shutil import copy2from loguru import loggerclass GoBuild:"""一个用于构建跨平台执行文件的类。初始化函数,设置构建的主文件、生成的执行文件名称以及目标平台。:param f: 需要构建的…...
SqlSugar查询达梦数据库遇到的异常情况(续)
之前的文章提到在SqlSugar的Where函数中使用!string.IsNullOrEmpty函数查询达梦数据库时,明明数据库中有数据但就是查不出来,但相同的代码在另一台电脑上就可以正常返回数据。 以下图中的两张表数据为例,执行下面的SQL语句无法查询到数据…...
企业电子投票系统 【源码+文档】
目 录 第1部分 概 述 第2部分 分析部分 2.1.功能需求 第3部分 系统设计 3.1.功能模块设计 3.2.数据库的设计 第4部分 系统开发 4.1.数据库 4.1&a…...
如何正确地安装和设置魔方财务软件?
安装和设置魔方财务软件需要按照以下步骤进行操作: 下载安装程序:首先,到魔方财务软件的官方网站或认可的软件下载网站下载安装程序。确保选择与您的操作系统兼容的版本。 运行安装程序:双击安装程序,按照提示进行安装…...
在Ubuntu 22.04 LTS中使用PyTorch深度学习框架并调用多GPU时遇到indexSelectLargeIndex相关的断言失败【笔记】
在Ubuntu 22.04 LTS系统中,已安装配置好CUDA 12.4、cuDNN 9.1.1以及PyTorch环境 export CUDA_VISIBLE_DEVICES0,1,2,3,4,5,6,7 在PyTorch深度学习框架训练调用多GPU时,提示 indexSelectLargeIndex: block: [x, 0, 0], thread: [x, 0, 0] Assertion src…...
[网络安全]XSS之Cookie外带攻击姿势详析
概念 XSS 的 Cookie 外带攻击就是一种针对 Web 应用程序中的 XSS(跨站脚本攻击)漏洞进行的攻击,攻击者通过在 XSS 攻击中注入恶意脚本,从而窃取用户的 Cookie 信息。 攻击者通常会利用已经存在的 XSS 漏洞,在受害者的…...
springmvc的拦截器,全局异常处理和文件上传
拦截器: 拦截不符合规则的,放行符合规则的。 等价于过滤器。 拦截器只拦截controller层API接口。 如何定义拦截器。 定义一个类并实现拦截器接口 public class MyInterceptor implements HandlerInterceptor {public boolean preHandle(HttpServletRequest reque…...
TypeScript进阶实战:构建可维护的企业级应用
"这代码太难维护了!"接手一个海外客户的项目后,我不禁感叹道。虽然项目用了 TypeScript,但类型定义混乱,代码提示基本失效,测试写起来也很痛苦。作为一个有着多年 TypeScript 开发经验的工程师,我…...
请求go web后端接口 java安卓端播放视频
前端代码 添加gradle依赖 implementation com.squareup.retrofit2:retrofit:2.9.0 implementation com.squareup.retrofit2:converter-gson:2.9.0 添加访问网络权限 <uses-permission android:name"android.permission.INTERNET" />允许http 请求请求 andro…...
Java 学习(四)集合框架与异常处理
在 Java 编程中,集合框架和异常处理机制是开发高效、健壮程序的两个关键部分。掌握这两个方面的知识,能够大大提高代码的质量和可维护性。本篇博客将深入探讨 Java 集合框架和异常处理机制的核心概念,并结合实际案例,帮助你更好地…...
如何调用yolov8的模型(restful和c++)
文章目录 方法一、通过RESTful API调用(推荐)第一步:部署yolo8服务端第二步:java中调用api方法二、JNI调用(本地调用)第一步:编写c/c++封装代码第二步:生成jni头文件和动态库第三步:在java中调用jni函数参考: 1.window系统下从0开始搭建yolov8环境 2.pycharm下载 3.y…...
Avalonia 开发环境准备
总目录 前言 介绍如何搭建 Avalonia 开发环境。 一、在线开发环境搭建 请先安装您选择的受支持的IDE。Avalonia 支持 Visual Studio、Rider 和 Visual Studio Code。 详见:https://docs.avaloniaui.net/zh-Hans/docs/get-started/install 1. 使用 Visual Studio 20…...
工信部人工智能专业技术人员证书介绍
一、证书介绍 图中展示的是由工业和信息化部电子工业标准化研究院颁发的人工智能专业技术人员证书。该证书封面为深蓝色,带有纹理,显得专业且庄重。封面上有“ESI”标志,以及“人工智能专业技术人员证书”和“工业和信息化部电子工业标准化研…...
11篇--图像边缘检测
图像梯度 要学习图像边缘检测,要先了解图像梯度的概念,我们正是通过梯度值来区分边缘像素点的 处于边缘附近的像素点与周围像素点的差距很大(不然不会有边缘呈现),所以给边缘附近的的梯度之变化很快,通过…...
【数值特性库】入口文件
数值特性库入口文件为lib.rs。该文件定义一系列数字特性的trait(特征),这些特性可以被不同的数字类型实现,从而提供一套通用的数值操作方法。下面是对代码中关键部分的解释: 一、基础设置 #![doc(html_root_url “h…...
企业微信客户管理工具
软件下载 点击这里下载软件 使用指南 查看操作演示视频 点击这里观看视频教程 安装与注意事项 排除防病毒程序干扰(本程序无病毒,请放心使用).避免快捷键冲突(确保 CtrlA 等快捷键无其他程序占用). 操作流程 手动启动企业微信,打开“添加客户”界面…...
Unity 碎片化空间的产生和优化
文章目录 产生1. 动态内存分配2. 磁盘文件操作3. 内存池和对象池4. 数据结构导致的碎片5. 操作系统的内存管理6. 应用程序设计不当 碎片化空间的优化方案 产生 碎片化空间通常指内存或磁盘中的一种分配不连续、难以利用的现象,主要由以下原因产生: 1. …...
音视频学习(二十七):SRT协议
SRT(Secure Reliable Transport)是一种开源的网络传输协议,专为实时音视频数据传输设计,具有低延迟、高可靠性和安全性等特点。 核心功能 SRT协议旨在解决实时音视频传输中的网络抖动、丢包、延迟和安全问题,提供以下…...
【Canvas与艺术】红色3号桌球
【注】 此图立体感还差点,以后改进吧。 【成图】 120*120的png图标: 大小图: 【代码】 <!DOCTYPE html> <html lang"utf-8"> <meta http-equiv"Content-Type" content"text/html; charsetutf-8&q…...
2024-12-20 iframe嵌套与postMessage传值
iframe嵌套与postMessage传值 在Web开发中,iframe嵌套和postMessage传值是两个常用的技术,它们各自具有独特的用途和优势。本文将对这两项技术进行详细解析,并通过实例展示其使用方法。 一、iframe嵌套 什么是iframe嵌套? ifram…...
MFC 应用程序语言切换
在开发多语言支持的 MFC 应用程序时,如何实现动态语言切换是一个常见的问题。在本文中,我们将介绍两种实现语言切换的方式,并讨论其优缺点。同时,我们还会介绍如何通过保存配置文件来记住用户的语言选择,以及如何在程序…...
与您的数据对话: 用人工智能驱动的对象存储变革医疗保健
MinIO 的提示 API 现在是 AIStor 的一部分。MinIO 的创建是为了支持海量数据集,包括超过 EB 级的工作负载,解决内存、网络、复制和负载均衡方面的挑战,而 AIStor 的创建是为了建立在这些功能之上并解决我们客户的 AI 使用案例。作为 AIStor 的…...
WIN10拖入文件到桌面,文件自动移动到左上角,导致桌面文件错乱
1.先打开文件管理器。 2.点击如下图所示的“选项”。 3.我用红笔标记的这个框,把勾去掉...
JavaSE——绘图入门
一、Java绘图坐标体系 下图说明了Java坐标系,坐标原地位于左上角,以像素为单位。在Java坐标系中,第一个是x坐标,表示当前位置为水平方向,距离坐标原点x个像素;第二个是y坐标,表示当前位置为垂直…...
electron-vite打包后图标不生效问题
在electron-builder.yml中,通过icon配置自己的图标,以下是正确代码 win:executableName: 名称icon: build/icon.ico nsis:artifactName: ${name}-${version}.${ext}shortcutName: ${productName}uninstallDisplayName: ${productName}createDesktopShor…...
【MySQL】Linux使用C语言连接安装
📢博客主页:https://blog.csdn.net/2301_779549673 📢欢迎点赞 👍 收藏 ⭐留言 📝 如有错误敬请指正! 📢本文由 JohnKi 原创,首发于 CSDN🙉 📢未来很长&#…...
Linux计算时间差
Linux计算时间差 1、Linux计算时间差2、时间差的应用 1、Linux计算时间差 在Linux中,计算时间差通常是为了统计、监控或调试。时间差可以用来衡量任务执行的时间,或者两个事件之间的间隔。例如,响应时间、执行时间、定时任务与延时处理等 以…...
onlyoffice连接器 二次开发 合同等制式模板化技术开发方案【三】
一、期望效果 目前曹瑞版本onlyoffice已经实现:书签模式 和 控件模式,用以支持该方案。 【图1】字段绑定 【图2】模板发起 【图3】接入表单 思路讲解: 业务系统开发中通常希望能够通过绑定form字段给word,从而达到双向同步效果&am…...
【论文研读】U-DiTs:在U型扩散Transformer中引入下采样Token,以更低计算成本超越DiT-XL/2
推荐理由 这篇论文提出了一种新的U型扩散Transformer模型(U-DiT),该模型通过对自注意力机制中的查询、键和值进行下采样,有效减少了计算冗余,同时提高了性能。论文中的研究不仅包含理论分析和实验验证,还展…...
2009 ~ 2019 年 408【计算机网络】大题解析
2009 年 路由算法(9’) 讲解视频推荐:【BOK408真题讲解-2009年(催更就退网版)】 某网络拓扑如下图所示,路由器 R1 通过接口 E1 、E2 分别连接局域网 1 、局域网 2 ,通过接口 L0 连接路由器 R2 &…...
.net core在linux导出excel,System.Drawing.Common is not supported on this platform
使用框架 .NET7 导出组件 Aspose.Cells for .NET 5.3.1 asp.net core mvc 如果使用Aspose.Cells导出excel时,报错 : System.Drawing.Common is not supported on this platform 平台特定实现: 对于Windows平台,System.Drawing.C…...
ExcelVBA编程输出ColorIndex与对应颜色色谱
标题 ExcelVBA编程输出ColorIndex与对应颜色色谱 正文 解决问题编程输出ColorIndex与对应色谱共56,打算分4纵列输出,标题是ColorIndex,Color,Name 1. 解释VBA中的ColorIndex属性 在VBA(Visual Basic for Applications)中ÿ…...
3.使用SD卡挂载petalinux根文件系统
前言 说明为什么使用SD卡挂载petalinux根文件系统如何使用SD卡挂载根文件系统 配置根文件写入类型制作SD分区格式化SD卡将工程目录下的rootfs.tar.gz解压到SD EXT4分区 为什么使用SD卡挂载petalinux根文件系统 Petalinux 默认的根文件系统类型是 INITRAMFS,不能…...
Java反射学习(1)(Java的“反射“机制、Class类对象的实例化方式)
目录 一、Java的"反射"机制。 (1)生活中的"反射"例子。 (2)Java的"反射"机制。 1、Java程序中"反射"的基本介绍。 2、"反射"机制图解介绍。 3、"反射"常见的应用场景…...
paimon中的Tag
TAG 在传统数仓场景中,从传统数据库中导入的事实表数据一般是全量导入,按天分区每天都存储一份全量数据,paimon对此提供了Tag机制,创建TAG时,会对当前数据做一份全量快照,在之后对表的数据进行更新也不会影…...
使用Vue创建前后端分离项目的过程(前端部分)
前端使用Vue.js作为前端开发框架,使用Vue CLI3脚手架搭建项目,使用axios作为HTTP库与后端API交互,使用Vue-router实现前端路由的定义、跳转以及参数的传递等,使用vuex进行数据状态管理,后端使用Node.jsexpress…...