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

Element-plus、Element-ui之Tree 树形控件回显Bug问题。

需求:提交时,需要把选中状态半选中状态 的数据id提交。如图所示:

数据回显时,会出现代码如下:

<template><el-tree ref="treeRef" :data="tree" show-checkbox node-key="id" :props="defaultProps"> </el-tree>
</template><script setup>
import { ref, onMounted } from 'vue';const tree = ref([{id: 1,label: '一级 1',children: [{id: 2,label: '二级 2',children: [{ id: 3, label: '三级 3' },{ id: 4, label: '三级 4' },],},],},{id: 5,label: '一级 5',children: [{ id: 6, label: '二级 6' },{ id: 7, label: '二级 7' },],},{id: 8,label: '一级 8',children: [{ id: 9, label: '二级 9' },{id: 10,label: '二级 10',children: [{ id: 11, label: '三级 11' },{ id: 12, label: '三级 12' },],},],},
]);
// 树组件
const treeRef = ref(null);
const defaultProps = ref({ children: 'children', label: 'label' });
// 回显数据
const dataPlayback = ref([1, 2, 4, 5, 6, 7, 8, 10, 12]);onMounted(() => {// 回显数据 赋值treeRef.value.setCheckedKeys(dataPlayback.value);
});
</script>

数据回显问题,如图所示:

修复方法如下:

<template><el-tree ref="treeRef" :data="tree" show-checkbox node-key="id" :props="defaultProps"> </el-tree><el-button @click="submit">提交</el-button><span> {{ submitData }}</span>
</template><script setup>
import { ref, onMounted } from 'vue';const tree = ref([{id: 1,label: '一级 1',children: [{id: 2,label: '二级 2',children: [{ id: 3, label: '三级 3' },{ id: 4, label: '三级 4' },],},],},{id: 5,label: '一级 5',children: [{ id: 6, label: '二级 6' },{ id: 7, label: '二级 7' },],},{id: 8,label: '一级 8',children: [{ id: 9, label: '二级 9' },{id: 10,label: '二级 10',children: [{ id: 11, label: '三级 11' },{ id: 12, label: '三级 12' },],},],},
]);
// 树组件
const treeRef = ref(null);
const defaultProps = ref({ children: 'children', label: 'label' });
// 回显数据
const dataPlayback = ref([1, 2, 4, 5, 6, 7, 8, 10, 12]);
// 提交数据
const submitData = ref([]);// 提取含有 children 的所有节点id
const getContainChildrenNode = (data) => {let ids = [];const recurse = (item) => {if (Array.isArray(item)) {item.forEach((node) => {if (node.children && node.children.length) {// 含有子项的节点idids.push(node.id);recurse(node.children);}});}};// 调用递归函数recurse(data);// 返回含有 children 的所有节点idreturn ids;
};// 提交
const submit = () => {submitData.value = [...treeRef.value.getCheckedKeys(), ...treeRef.value.getHalfCheckedKeys()]; //得到 所有选中的节点id [ 4, 5, 6, 7, 12, 1, 2, 8, 10 ]
};onMounted(() => {// 收集所有顶级节点的值const nodeIds = getContainChildrenNode(tree.value); // 得到 含有 children 的所有节点id [1, 2, 5, 8, 10]// 过滤掉 顶级节点的值const treeVal = dataPlayback.value.filter((item) => !nodeIds.includes(item)); // 得到 回显数据 [4, 6, 7, 12]// 回显数据 赋值treeRef.value.setCheckedKeys(treeVal);
});
</script>

相关文章:

Element-plus、Element-ui之Tree 树形控件回显Bug问题。

需求&#xff1a;提交时&#xff0c;需要把选中状态和半选中状态 的数据id提交。如图所示&#xff1a; 数据回显时&#xff0c;会出现代码如下&#xff1a; <template><el-tree ref"treeRef" :data"tree" show-checkbox node-key"id" …...

互联网全景消息(10)之Kafka深度剖析(中)

一、深入应用 1.1 SpringBoot集成Kafka 引入对应的依赖。 <dependencies><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web</artifactId></dependency><dependency><groupI…...

Oracle Dataguard(主库为双节点集群)配置详解(5):将主库复制到备库并启动同步

Oracle Dataguard&#xff08;主库为双节点集群&#xff09;配置详解&#xff08;5&#xff09;&#xff1a;将主库复制到备库并启动同步 目录 Oracle Dataguard&#xff08;主库为双节点集群&#xff09;配置详解&#xff08;5&#xff09;&#xff1a;将主库复制到备库并启动…...

pytorch小记(一):pytorch矩阵乘法:torch.matmul(x, y)

pytorch小记&#xff08;一&#xff09;&#xff1a;pytorch矩阵乘法&#xff1a;torch.matmul&#xff08;x, y&#xff09;/ x y 代码代码 1&#xff1a;torch.matmul(x, y)输入张量&#xff1a;计算逻辑&#xff1a;输出结果&#xff1a; 代码 2&#xff1a;y y.view(4,1)…...

PyTorch环境配置常见报错的解决办法

目标 小白在最基础的环境配置里一般都会出现许多问题。 这里把一些常见的问题分享出来。希望可以节省大家一些时间。 最终目标是可以在cmd虚拟环境里进入jupyter notebook&#xff0c;new的时候有对应的环境&#xff0c;并且可以跑通所有的import code。 第一步&#xff1a;…...

罗永浩再创业,这次盯上了 AI?

罗永浩&#xff0c;1972年7月9日生于中国延边朝鲜族自治州的一个军人家庭&#xff0c;是一名朝鲜族人&#xff1b;早年在新东方授课&#xff0c;2004年当选 “网络十大红人” &#xff1b;2006年8月1日&#xff0c;罗永浩创办牛博网&#xff1b;2008年5月&#xff0c;罗永浩注册…...

VUE3 provide 和 inject,跨越多层级组件传递数据

provide 和 inject 是 Vue 3 提供的 API&#xff0c;主要用于实现祖先组件与后代组件之间的依赖注入。它们可以让你在组件树中&#xff0c;跨越多层组件传递数据&#xff0c;而不需要通过 props 或事件的方式逐层传递。这个机制主要用于状态共享、插件系统或某些跨层级的功能。…...

git打补丁

1、应用场景 跨仓库升级 开发项目B使用的是开源项目A。开源项目A发现漏洞&#xff0c;作者进行了修复&#xff0c;我们可以通过使用git补丁的方式&#xff0c;将作者修改的内容复制到我 们的项目B中。 2、TortoiseGit方式 源仓库 格式化补丁 根据提交数量&#xff0c;生成…...

机械燃油车知识图谱、知识大纲、知识结构(持续更新...)

一、发动机 曲柄连杆机构 配气机构 点火系统 起动系统 燃油供给系统 润滑系统 冷却系统 二、底盘 &#xff08;一&#xff09;传动系统 1、离合器 2、变速器 3、万向传动装置 4、驱动桥 &#xff08;二&#xff09;行驶系统 1、车架 2、车桥 3、悬架 4、车轮 &a…...

Vue3学习总结

一、Vue 3 基础搭建与核心语法 1.创建 Vue 3 应用 在项目的入口文件 main.js 中&#xff0c;通过以下代码创建 Vue 3 应用实例&#xff1a; import { createApp } from vue; import App from ./App.vue;const app createApp(App); app.mount(#app); 这几行代码的作用是引入…...

Type-C双屏显示器方案

在数字化时代&#xff0c;高效的信息处理和视觉体验已成为我们日常生活和工作的关键需求。随着科技的进步&#xff0c;一款结合了便携性和高效视觉输出的设备——双屏便携屏&#xff0c;逐渐崭露头角&#xff0c;成为追求高效工作和娱乐体验人群的新宠。本文将深入探讨双屏便携…...

【读书与思考】焦虑与内耗

【AI论文解读】【AI知识点】【AI小项目】【AI战略思考】【AI日记】【读书与思考】 导言 今天一个朋友和我说&#xff0c;最近比较焦虑和内耗&#xff0c;无心工作和学习&#xff0c;我问他你焦虑内耗的时候&#xff0c;时间主要花在哪了&#xff0c;他告诉我说主要花在看有关移…...

基于python的网页表格数据下载--转excel

基于 Python 的网页表格数据爬取与下载:以维基百科为例 目录 基于 Python 的网页表格数据爬取与下载:以维基百科为例1. 背景介绍2. 工具与环境3. 操作步骤1. 获取网页内容2. 定位表格元素3. 表格变身 Pandas DataFrame4. 检查数据,收工!5. 进阶玩法与优化6. 完整代码4. 结果…...

Vue.js开发入门:从零开始搭建你的第一个项目

前言 嘿&#xff0c;小伙伴们&#xff01;今天咱们来聊聊 Vue.js&#xff0c;一个超火的前端框架。如果你是编程小白&#xff0c;别怕&#xff0c;跟着我一步步来&#xff0c;保证你能轻松上手&#xff0c;搭建起属于自己的第一个 Vue 项目。Vue.js 可能听起来有点高大上&#…...

LS1046+XILINX XDMA PCIE调通

欢迎点赞收藏&#xff0c;欢迎私下讨论技术&#xff0c;分享技术 硬件平台 &#xff1a;NXP LS1046 XILINX FPGA 软件平台&#xff1a;LINUX 4.19.68 buildroot LS1046 PEX3 接 XILINX FPGA&#xff0c;linux使用designware的PCI主控制器。下载XILINX DMA驱动&#xff0c;解…...

HarmonyOS:@LocalBuilder装饰器: 维持组件父子关系

一、前言 当开发者使用Builder做引用数据传递时&#xff0c;会考虑组件的父子关系&#xff0c;使用了bind(this)之后&#xff0c;组件的父子关系和状态管理的父子关系并不一致。为了解决组件的父子关系和状态管理的父子关系保持一致的问题&#xff0c;引入LocalBuilder装饰器。…...

YOLOv10-1.1部分代码阅读笔记-downloads.py

downloads.py ultralytics\utils\downloads.py 目录 downloads.py 1.所需的库和模块 2.def is_url(url, checkFalse): 3.def delete_dsstore(path, files_to_delete(".DS_Store", "__MACOSX")): 4.def zip_directory(directory, compressTrue, ex…...

计算机图形学【绘制立方体和正六边形】

工具介绍 OpenGL&#xff1a;一个跨语言的图形API&#xff0c;用于渲染2D和3D图形。它提供了绘制图形所需的底层功能。 GLUT&#xff1a;OpenGL的一个工具库&#xff0c;简化了窗口创建、输入处理和其他与图形环境相关的任务。 使用的函数 1. glClear(GL_COLOR_BUFFER_BIT |…...

基于django中医药数据可视化平台(源码+lw+部署文档+讲解),源码可白嫖!

摘要 时代在飞速进步&#xff0c;每个行业都在努力发展现在先进技术&#xff0c;通过这些先进的技术来提高自己的水平和优势&#xff0c;中医药管理平台当然不能排除在外。中医药数据可视化平台是在实际应用和软件工程的开发原理之上&#xff0c;运用Python语言、ECharts技术、…...

kafka消费堆积问题探索

背景 我们的商城项目用PHP写的&#xff0c;原本写日志方案用的是PHP的方案&#xff0c;但是&#xff0c;这个方案导致资源消耗一直降不下来&#xff0c;使用了20个CPU。后面考虑使用通过kafka的方案写日志&#xff0c;商城中把产生的日志丢到kafka中&#xff0c;在以go写的项目…...

快马平台十分钟速成:用AI大模型构建你的第一个智能客服对话Agent原型

最近在尝试用AI大模型构建智能客服对话系统&#xff0c;发现InsCode(快马)平台特别适合快速验证这类原型。花十分钟就能搭建出具备基础功能的对话agent&#xff0c;和大家分享下具体实现思路&#xff1a; 界面设计 先用HTML搭建基础框架&#xff0c;主要包含三个部分&#xff1…...

MySQL服务从CentOS7迁移到Rocky Linux 9.4实施文档

一、文档概述 本文档针对CentOS 7系统上运行的MySQL服务迁移至Rocky Linux 9.4的完整实施流程进行说明,适用于生产环境下MySQL 5.7/8.0版本的迁移操作,涵盖迁移前准备、迁移执行、验证、回滚全流程,可有效控制迁移风险,保障业务连续性。 本次迁移可选两种方案:原地升级迁…...

VLA模型实战避坑指南:从RT-1到Octo,如何为你的机器人选对架构?

VLA模型实战避坑指南&#xff1a;从RT-1到Octo的架构选型方法论 当机械臂需要根据"把红色积木放在蓝色盒子左侧"的指令完成操作时&#xff0c;工程师面临的第一个决策往往不是算法调参&#xff0c;而是选择哪种VLA&#xff08;Vision-Language-Action&#xff09;架…...

Ostrakon-VL-8B部署指南:快速搭建支持图片问答的智能系统

Ostrakon-VL-8B部署指南&#xff1a;快速搭建支持图片问答的智能系统 1. 系统概述 Ostrakon-VL-8B是一款专为零售和餐饮场景优化的多模态视觉理解系统。它能像人类一样"看懂"图片内容&#xff0c;并回答与图片相关的各种问题。 这个系统基于Qwen3-VL-8B模型微调而…...

AgentCPM-Report镜像免配置方案:Pixel Epic一键部署教程(含Streamlit定制)

AgentCPM-Report镜像免配置方案&#xff1a;Pixel Epic一键部署教程&#xff08;含Streamlit定制&#xff09; 1. 像素史诗&#xff1a;当科研遇上RPG冒险 想象一下&#xff0c;撰写专业研究报告的过程变成了一场像素风格的RPG冒险。这就是Pixel Epic带来的独特体验——它将A…...

AI赋能运维:基于快马平台打造智能域名故障诊断与修复建议助手

最近在维护公司网站时遇到了新老域名切换导致的访问故障&#xff0c;传统排查流程需要手动分析日志、逐个测试可能原因&#xff0c;效率很低。这次尝试用InsCode(快马)平台的AI能力搭建了一个智能诊断工具&#xff0c;效果超出预期。分享下具体实现思路和关键环节&#xff1a; …...

OpenClaw+Qwen2.5-VL-7B:自动化生成图文报告

OpenClawQwen2.5-VL-7B&#xff1a;自动化生成图文报告 1. 为什么需要自动化图文报告 作为一名数据分析师&#xff0c;我每天都要处理大量数据并生成报告。传统的工作流程是&#xff1a;先整理Excel表格&#xff0c;然后手动截图插入PPT&#xff0c;最后撰写分析文字。这个过…...

PyTorch 2.8 GPU算力优化部署教程:RTX 4090D显存利用率提升至92%

PyTorch 2.8 GPU算力优化部署教程&#xff1a;RTX 4090D显存利用率提升至92% 1. 环境准备与快速验证 在开始深度学习项目前&#xff0c;确保你的硬件配置符合以下要求&#xff1a; 显卡&#xff1a;NVIDIA RTX 4090D 24GB显存驱动版本&#xff1a;550.90.07或更高系统内存&a…...

Claude Code每日更新速览(v2.1.90)-2026/04/02

本文前言&#xff1a; Claude Code 的进化速度&#xff0c;已经到了一种让人来不及消化的程度。根据 github.com/anthropics/claude-code/blob/main/CHANGELOG.md 获取最新的变更&#xff0c;跟紧 Claude Code新功能、新趋势。最新版本&#xff1a;v2.1.90提交时间&#xff1a;…...

Qwen3.5-9B应用场景:开发者日常——Stack Overflow式问答+Debug辅助

Qwen3.5-9B应用场景&#xff1a;开发者日常——Stack Overflow式问答Debug辅助 1. 开发者新利器&#xff1a;Qwen3.5-9B大模型 作为一名开发者&#xff0c;你是否经常遇到这样的场景&#xff1a;深夜调试代码时遇到报错&#xff0c;Stack Overflow上找不到满意答案&#xff1…...