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>

效果图

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

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

相关文章

疾风大模型气象系统:精准到分钟,预见天气未来

精准到分钟,预见天气未来 在现代社会中,气象预报的精准度直接关系到人们的生活质量和生产效率。传统的天气预报虽然能为我们提供趋势性参考,但在短时突发天气变化的应对上仍有一定局限。而疾风大模型气象系统凭借其领先的技术和精细化的预测能力,为气象预报树立了新的标杆…

2024年合肥师范学院信息安全小组内部选拔赛(c211)WP

目录 前言MISC签到题_熟悉吗又来一道签到题文件包含 CRYPTO古典1古典2RSA webbaby_sql 前言 [HFNU 校级选拔] 已经结束&#xff0c;接下来一起了解下题目是怎么做的。 通过网盘分享的文件&#xff1a;ARCHPR_4.66.266.0_汉化绿色版.7z 链接: https://pan.baidu.com/s/1N_c0PJX…

15.初识接口1 C#

这是一个用于实验接口的代码 适合初认识接口的人 【CSDN开头介绍】&#xff08;文心一言AI生成&#xff09; 在C#编程世界中&#xff0c;接口&#xff08;Interface&#xff09;扮演着至关重要的角色&#xff0c;它定义了一组方法&#xff0c;但不提供这些方法的实现。它要求所…

3.使用SD卡挂载petalinux根文件系统

前言 说明为什么使用SD卡挂载petalinux根文件系统如何使用SD卡挂载根文件系统 配置根文件写入类型制作SD分区格式化SD卡将工程目录下的rootfs.tar.gz解压到SD EXT4分区 为什么使用SD卡挂载petalinux根文件系统 Petalinux 默认的根文件系统类型是 INITRAMFS&#xff0c;不能…

【Vulkan入门】16-IndexBuffer

TOC 先叨叨 上篇介绍了如何使用VertexBuffer传入顶点信息。两个多星期了我们一直在玩三个点&#xff0c;本篇介绍如何渲染更多的点。 在渲染前考虑一个问题&#xff0c;渲染一个三角形需要三个点&#xff0c;渲染两个相接的三角形需要几个点&#xff1f; 答案是6个点&#xf…

计算机工作流程

分析下面的计算机工作流程&#xff1a; 1.取数a至ACC&#xff1a;PC程序寄存器自增1&#xff0c;变成0&#xff08;可以理解为PC初始从-1开始自增&#xff09;&#xff1b;接着PC把当前指令的地址给到MAR&#xff08;地址寄存器&#xff09;&#xff1b;MAR拿到当前地址后&…

Restaurants WebAPI(二)——DTO/CQRS

文章目录 项目地址一、DTO1.1 创建Restaurant的Dto1.2 修改之前未使用Dto的接口1.2.1 修改GetRestaurantByIdUseCase1.2.2 修改IGetRestaurantByIdUseCase接口1.2.3 再次请求接口1.3 显示Dish List1.3.1创建DishDto1.3.2 在RestaurantDto里添加DishDto1.3.3 使用Include添加Dis…

202412月最新植物大战僵尸杂交版【V3.0.1】更新内容与下载

以下是对UI优化和新内容添加的摘要&#xff1a; UI优化摘要&#xff1a; 主界面重做&#xff1a;对游戏的主界面进行全面的设计更新&#xff0c;提升用户体验。商店重做&#xff1a;对游戏内的商店界面进行重新设计&#xff0c;以改善玩家的购物体验。选卡界面增加图鉴功能&a…

MCU驱动使用

一、时钟的配置&#xff1a; AG32 通常使用 HSE 外部晶体&#xff08;范围&#xff1a;4M~16M&#xff09;。 AG32 中不需要手动设置 PLL 时钟&#xff08;时钟树由系统自动配置&#xff0c;无须用户关注&#xff09;。用户只需在配置文件中给出外部晶振频率和系统主频即可。 …

服务器防火墙设置某个端口号只允许固定 ip地址访问

服务器防火墙设置某个端口号只允许固定 ip地址访问是运维常见的功能&#xff0c;今天我们分享一下&#xff1a; 一、Linux环境 1、firewall 方式 1&#xff09;允许特定 IP 地址访问 23 端口 sudo firewall-cmd --zonepublic --add-rich-rulerule family"ipv4" s…

Hexo Next主题集成百度统计

个人博客地址&#xff1a;Hexo Next主题集成百度统计 | 一张假钞的真实世界。 首先&#xff0c;需要在百度统计控制台新增自己的站点。 点击“新增网站”按钮&#xff1a; 按照要求输入相关信息并保存&#xff0c;页面跳转至代码获取页面。从代码页面中拷贝网站的ID&#xff1…

8K+Red+Raw+ProRes422分享5个影视级视频素材网站

Hello&#xff0c;大家好&#xff0c;我是后期圈&#xff01; 在视频创作中&#xff0c;电影级的视频素材能够为作品增添专业质感&#xff0c;让画面更具冲击力。无论是广告、电影短片&#xff0c;还是品牌宣传&#xff0c;高质量的视频素材都是不可或缺的资源。然而&#xff…

JumpServer开源堡垒机搭建及使用

目录 一,产品介绍 二,功能介绍 三,系统架构 3.1 应用架构 3.2 组件说明 3.3 逻辑架构 3.3 逻辑架构 四,linux单机部署及方式选择 4.1 操作系统要求(JumpServer-v3系列版本) 4.1.1 数据库 4.1.3创建数据库参考 4.2 在线安装 4.2.1 环境访问 4.3 基于docker容…

华为云计算HCIE笔记01

第一章 华为云Stack解决方案 2018年云栖大会马云提出的数据科学时代&#xff08;Data technology&#xff09;&#xff0c;相较于传统信息时代&#xff0c;技术的变更主要集中在过去我们更加看重的是传输&#xff0c;也就是传统的网络建设&#xff0c;随着目前国家网络建设的完…

Redis的主从集群以及哨兵机制学习总结

Redis的主从集群以及哨兵机制 为什么要使用主从集群&#xff1f;部署主从集群主从集群怎么同步数据&#xff1f;数据同步的方式和时机实例查看主从数据同步原理增量同步潜在的问题主从集群的优化 主节点宕机怎么办&#xff1f;哨兵机制 为什么要使用主从集群&#xff1f; 我们…

【机器学习】机器学习的基本分类-强化学习(Reinforcement Learning, RL)

强化学习&#xff08;Reinforcement Learning, RL&#xff09;是一种基于试错的方法&#xff0c;旨在通过智能体与环境的交互&#xff0c;学习能够最大化累积奖励的策略。以下是强化学习的详细介绍。 强化学习的核心概念 智能体&#xff08;Agent&#xff09; 执行动作并与环境…

行政管理痛点解决方案:OA系统助力企业提效减负

作为企业行政管理的中枢&#xff0c;行政部门承担着企业运转的核心职责。从办公物资采购到会议室安排&#xff0c;从流程审批到企业文化建设&#xff0c;行政工作繁杂且细致。然而&#xff0c;在传统管理模式下&#xff0c;行政工作往往面临以下痛点&#xff1a; 流程繁琐&…

Flask内存马学习

文章目录 参考文章环境搭建before_request方法构造内存马after_request方法构造内存马errorhandler方式构造内存马add_url_rule方式构造内存马 参考文章 https://www.mewo.cc/archives/10/ https://www.cnblogs.com/gxngxngxn/p/18181936 前人栽树, 后人乘凉 大佬们太nb了, …

小红书关键词搜索采集 | AI改写 | 无水印下载 | 多维表格 | 采集同步飞书

小红书关键词搜索采集 | AI改写 | 无水印下载 | 多维表格 | 采集同步飞书 一、下载影刀&#xff1a; https://www.winrobot360.com/share/activity?inviteUserUuid595634970300317698 二、加入应用市场 https://www.yingdao.com/share/accede/?inviteKeyb2d3f22a-fd6c-4a…

(五)FT2232HL高速调试器之--三步实现STM32的VSCODE在线仿真工程搭建

对于单片机开发&#xff0c;rtthread studios 与 vscode&#xff0c;鱼与熊掌可以兼得否&#xff0c;其实是可以的&#xff0c;下面通过三个步骤&#xff0c;实现基于FT2232HL高速调试器的&#xff0c;stm32的VSCODE在线仿真工程的搭建。 1、软件下载与VSCODE插件安装配置 软…