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

Element@2.15.14-tree checkStrictly 状态实现父项联动子项，实现节点自定义编辑、新增、删除功能

news 2026/4/2 14:48:40

背景：现在有一个新需求，需要借助树结构来实现词库的分类管理，树的节点是不同的分类，不同的分类可以有自己的词库，所以父子节点是互不影响的；同样为了选择的方便性，提出了新需求，选择了父级子级需要全选，父级取消勾选子级需要全部取消勾选；分类支持修改名称、增加子节点、删除子节点，多选子节点时需要获取当前所选分类下的所有词库。

一、开发前需要知道的

1、树结构需要借助 element 的 tree 组件

2、树结构需要设置父子级不关联，即 :check-strictly="true"

3、节点选择时如果是非叶子结点（最后一层的子节点，没有 children），需要递归获取子节点，如果进行节点的选择与取消选择

4、自定义节点需要通过 slot 方式活着 render-content 方式实现

二、实现流程

1、引入 tree，传入源数据 data、设置 key，设置默认配置属性 defaultProps

1. 定义 tree
<el-tree:check-strictly="true":data="data"@check-change="checkChange"ref="treeRef"show-checkboxdefault-expand-allnode-key="id"ref="tree"highlight-current:props="defaultProps"
>
</el-tree>
2. 设置 data
data = [{id: xx, label: xx, children: {id: number, label: string, children: []}[]}]
3. 设置父子不关联
:check-strictly="true"
4. 设置默认配置
const defaultProps = {children: "children",label: "label",
}

2、实现父子勾选子级联动

// 1. 给 el-tree 绑定 check-change 事情
@check-change="checkChange"// 2. 实现 checkChange 函数
// data：当前节点 checked：节点是否选中 indeterminate：是否有选中的子项
function checkChange(data, checked, indeterminate) {console.log("data, checked, indeterminate", data, checked, indeterminate);this.$nextTick(() => {// 2.1 获取节点详细信息const nodeInfo = this.$refs.treeRef.getNode(data.id);const { isLeaf, checked } = nodeInfo;this.nodeInfo = nodeInfo;function getAllIds(arr, res = []) {for (let i = 0; i < arr.length; i++) {res.push(arr[i].id);if (arr[i].children && arr[i].children.length) {getAllIds(arr[i].children, res);}}return res;}// 2.2 获取当前已选中的节点console.log(this.$refs.treeRef.getCheckedKeys());// 2.3 如果是父级，子级选中跟取消选择if (!isLeaf) {const checkedIds = this.$refs.treeRef.getCheckedKeys();const ids = getAllIds(nodeInfo.data.children);console.log(ids);// 2.3.1 父级选中，子级全选if (checked) {this.$refs.treeRef.setCheckedKeys(Array.from(new Set([...checkedIds, ...ids])));} else {// 2.3.2 父级取消选中，子级全不选this.$refs.treeRef.setCheckedKeys(Array.from(new Set(checkedIds.filter((item) => !ids.includes(item)))));}}});
},

3、通过 slot 实现编辑、新增、删除

1. slot 内容
<span class="custom-tree-node" slot-scope="{ node, data }"><span>{{ node.label }}</span><span><el-button type="text" size="mini" @click="() => edit(node, data)">edit</el-button><el-button type="text" size="mini" @click="() => append(data)">Append</el-button><el-buttontype="text"size="mini"@click="() => remove(node, data)">Delete</el-button></span>
</span>2. 设置函数
{// 2.1 编辑，子级可以弹窗回显名称，然后修改名称edit(node, data) {console.log(node, data);},// 2.2 新增，新增内容自己定，也可以弹窗自定义名称，通过接口返回 id 再拼接append(data) {const newChild = { id: this.id++, label: "testtest", children: [] };if (!data.children) {this.$set(data, "children", []);}data.children.push(newChild);},// 2.3 删除，可以先进行提示，提示确定后再删remove(node, data) {const parent = node.parent;const children = parent.data.children || parent.data;const index = children.findIndex((d) => d.id === data.id);children.splice(index, 1);}
}

三、整体代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><linkrel="stylesheet"href="https://unpkg.com/element-ui@2.15.14/lib/theme-chalk/index.css"/><style>.custom-tree-node {flex: 1;display: flex;align-items: center;justify-content: space-between;font-size: 14px;padding-right: 8px;}</style></head><body><script src="https://unpkg.com/vue@2.7.16/dist/vue.js"></script><script src="https://unpkg.com/element-ui@2.15.14/lib/index.js"></script><div id="app"><el-tree:check-strictly="true":data="data"@check-change="checkChange"ref="treeRef"show-checkboxdefault-expand-allnode-key="id"ref="tree"highlight-current:props="defaultProps"><span class="custom-tree-node" slot-scope="{ node, data }"><span>{{ node.label }}</span><span><el-button type="text" size="mini" @click="() => edit(node, data)">edit</el-button><el-button type="text" size="mini" @click="() => append(data)">Append</el-button><el-buttontype="text"size="mini"@click="() => remove(node, data)">Delete</el-button></span></span></el-tree><div class="buttons"><el-button @click="getCheckedNodes">通过 node 获取</el-button><el-button @click="getCheckedKeys">通过 key 获取</el-button><el-button @click="setCheckedNodes">通过 node 设置</el-button><el-button @click="setCheckedKeys">通过 key 设置</el-button><el-button @click="resetChecked">清空</el-button></div></div><script>var Main = {methods: {edit(node, data) {console.log(node, data);},append(data) {const newChild = { id: this.id++, label: "testtest", children: [] };if (!data.children) {this.$set(data, "children", []);}data.children.push(newChild);},remove(node, data) {const parent = node.parent;const children = parent.data.children || parent.data;const index = children.findIndex((d) => d.id === data.id);children.splice(index, 1);},checkChange(data, checked, indeterminate) {this.node = data;this.checked = checked;this.indeterminate = indeterminate;// console.log("data, checked, indeterminate", data, checked, indeterminate);this.$nextTick(() => {console.log(data.id);const nodeInfo = this.$refs.treeRef.getNode(data.id);const { isLeaf, checked } = nodeInfo;this.nodeInfo = nodeInfo;console.log(nodeInfo);// console.log(//   "nodeInfo, isLeaf, childNodes, checked",//   nodeInfo,//   isLeaf,//   childNodes,//   checked// );function getAllIds(arr, res = []) {for (let i = 0; i < arr.length; i++) {res.push(arr[i].id);if (arr[i].children && arr[i].children.length) {getAllIds(arr[i].children, res);}}return res;}console.log(this.$refs.treeRef.getCheckedKeys());if (!isLeaf) {const checkedIds = this.$refs.treeRef.getCheckedKeys();const ids = getAllIds(nodeInfo.data.children);console.log(ids);if (checked) {this.$refs.treeRef.setCheckedKeys(Array.from(new Set([...checkedIds, ...ids])));} else {this.$refs.treeRef.setCheckedKeys(Array.from(new Set(checkedIds.filter((item) => !ids.includes(item)))));}}});},getCheckedNodes() {console.log(this.$refs.tree.getCheckedNodes());},getCheckedKeys() {console.log(this.$refs.tree.getCheckedKeys());},setCheckedNodes() {this.$refs.tree.setCheckedNodes([{id: 5,label: "二级 2-1",},{id: 9,label: "三级 1-1-1",},]);},setCheckedKeys() {this.$refs.tree.setCheckedKeys([3]);},resetChecked() {this.$refs.tree.setCheckedKeys([]);},},data() {return {id: 10,data: [{id: 1,label: "一级 1",children: [{id: 4,label: "二级 1-1",children: [{id: 9,label: "三级 1-1-1",},{id: 10,label: "三级 1-1-2",},],},],},{id: 2,label: "一级 2",children: [{id: 5,label: "二级 2-1",},{id: 6,label: "二级 2-2",},],},{id: 3,label: "一级 3",children: [{id: 7,label: "二级 3-1",},{id: 8,label: "二级 3-2",},],},],defaultProps: {children: "children",label: "label",},};},};var Ctor = Vue.extend(Main);new Ctor().$mount("#app");</script></body>
</html>

四、codepen 在线编辑

https://codepen.io/CAILeiz/pen/MYgpYOW

相关文章：

Element@2.15.14-tree checkStrictly 状态实现父项联动子项，实现节点自定义编辑、新增、删除功能

背景&#xff1a;现在有一个新需求&#xff0c;需要借助树结构来实现词库的分类管理&#xff0c;树的节点是不同的分类&#xff0c;不同的分类可以有自己的词库&#xff0c;所以父子节点是互不影响的&#xff1b;同样为了选择的方便性&#xff0c;提出了新需求&#xff0c;选择…...

编程日记 2024/12/22 22:07:35

详细介绍如何使用rapidjson读取json文件

本文主要详细介绍如何使用rapidjson库来实现.json文件的读取&#xff0c;分为相关基础介绍、结合简单示例进行基础介绍、结合复杂示例进行详细的函数实现介绍等三部分。 一、相关基础 1、Json文件中的{} 和 [] 在 JSON 文件中&#xff0c;{} 和 [] 分别表示不同的数据结构&…...

编程日记 2024/12/22 22:06:34

【Qt】显示类控件：QLabel、QLCDNumber、QProgressBar、QCalendarWidget

目录 QLabel QFrame 例子&#xff1a; textFormat pixmap、scaledContents alignment wordWrap、indent、margin buddy QLCDNumber 例子&#xff1a; QTimer QProgressBar 例子&#xff1a; QCalendarWidget 例子&#xff1a; QLabel 标签控件&#xff0c;用来显示…...

编程日记 2024/12/22 22:05:33

设计模式-访问者设计模式

介绍 访问者模式&#xff08;Visitor&#xff09;&#xff0c;表示一个作用于某对象结构中的各元素的操作&#xff0c;它使你可以在不改变个元素的类的前提下定义作用于这些元素的新操作。 问题&#xff1a;在一个机构里面有两种员工&#xff0c;1.Teacher 2.Engineer 员…...

编程日记 2024/12/22 22:03:31

Spring框架IOC

目录 一、Spring框架的介绍 1.1 Spring框架的概述 1.2 Spring框架的优点 二、Spring的核心 IOC技术 2.1 什么是IOC 2.2 IOC的程序入门 2.3 IOC技术总结 2.4 Spring框架的Bean管理的配置文件方式 一、Spring框架的介绍 1.1 Spring框架的概述 Spring是一个开放源代码的…...

编程日记 2024/12/22 22:01:29

有哪些免费的 ERP 软件可供选择？哪些 ERP 软件使用体验较好？

想找个 “免费” 的 ERP 软件&#xff1f; 咱得知道&#xff0c;ERP 那可是涉及财务、人力、供应链、采购、销售等好多方面的重要企业软件。功能这么全&#xff0c;能免费才怪呢&#xff01;真要是有免费的&#xff0c;早就火遍大江南北&#xff0c;说不定把市场都垄断了&…...

编程日记 2024/12/22 21:55:23

思科CCNA认证都学什么考什么？

关注 工 仲 好&#xff1a;IT运维大本营CCNA考试要学的东西很多&#xff0c;你不要看它只是一个初级认证&#xff0c;但是它的专业内容知识是不少的&#xff0c;你想要学好也是需要下一番苦功的。 那么考CCNA需要学哪些东西呢&#xff1f;下面我们就来了解一下吧。 01、考CCN…...

编程日记 2024/12/22 21:53:21

模型部署学习笔记——模型部署关键知识点总结

模型部署学习笔记——模型部署关键知识点总结 模型部署学习笔记——模型部署关键知识点总结1. CUDA中Grid和Block的定义是什么&#xff1f;Shared Memory的定义&#xff1f;Bank Conflict的定义&#xff1f;Stream和Event的定义&#xff1f;2. TensorRT的工作流程&#xff1f;3…...

编程日记 2024/12/22 21:46:15

22智能 狄克斯特拉算法复习

狄克斯特拉算法 图 根据边有无方向分为&#xff1a; 有向图、无向图 根据边有无权重变量分为&#xff1a; 有权图、无权图 根据顶点是否连通分为&#xff1a; 连通图和非连通图入度&#xff1a;表示有多少条边指向该顶点出度&#xff1a;表示有多少条边从该顶点指出算法步骤&a…...

编程日记 2024/12/22 21:45:14

首个！艾灵参编的工业边缘计算国家标准正式发布

近日&#xff0c;艾灵参与编制的《面向工业应用的边缘计算 应用指南》&#xff08;以下简称《标准》&#xff09;国家标准正式发布&#xff0c;将于2025年5月1日起实施。这一里程碑式的成果&#xff0c;不仅标志着我国在工业边缘计算技术标准化领域取得了重大突破&#xff0c;成…...

编程日记 2024/12/22 21:44:13

curl也支持断点续传

curl断点续传 访问外网资源&#xff0c;特别是Github上比较大的资源&#xff0c;例如&#xff0c;笔者遇到的calico发布包&#xff0c;经常会遇到在浏览器上下载半途中断。 那么支持断点续传的下载工具&#xff0c;就是应对这种情况的好帮手&#xff01; 简单的断点续传工具…...

编程日记 2024/12/22 21:43:12

交换机链路聚合(手动负载分担模式)（eNSP）

目录 交换机SW_C配置： 交换机-PC划分vlan： 交换机-交换机端口聚合： 交换机SW_D配置: 交换机-PC划分vlan： 交换机-交换机端口聚合： 验证： 链路聚合的端口清除： 交换机端口聚合的存在意义主要有以下几点： 增加带宽 提高冗余性和可靠性 实现负载均衡 降低成本 …...

编程日记 2024/12/22 21:40:08

jmeter 接口性能测试 学习笔记

目录 说明工具准备工具配置jmeter 界面汉化配置汉化步骤汉化结果图 案例1&#xff1a;测试接口接口准备线程组添加线程组配置线程组值线程数&#xff08;Number of Threads&#xff09;Ramp-Up 时间&#xff08;Ramp-Up Period&#xff09;循环次数&#xff08;Loop Count&…...

编程日记 2024/12/22 21:23:51

`HashMap`、`Hashtable` 和 `HashSet`的区别

HashMap、Hashtable 和 HashSet 都是 Java 中常用的集合类&#xff0c;它们的功能和实现有所不同&#xff0c;尽管它们都使用哈希表&#xff08;hash table&#xff09;作为底层数据结构。以下是它们之间的主要区别&#xff1a; 1. HashMap 和 Hashtable 的区别 特性HashMapH…...

编程日记 2024/12/22 21:14:42

Arduino中解析JSON数据

JSON JSON&#xff08;JavaScript Object Notation&#xff0c;即JavaScript对象表示法&#xff09;是一种广泛采用的开放标准文件格式与数据交换格式。它兼具人类可读性和机器易解析性&#xff0c;使得数据的编写、阅读、生成及解析都变得十分便捷。JSON的设计不依赖于特定编…...

编程日记 2024/12/22 21:09:37

linux----文件访问（c语言）

linux文件访问相关函数 打开文件函数 - open 函数原型&#xff1a;int open(const char *pathname, int flags, mode_t mode);参数说明&#xff1a; pathname&#xff1a;这是要打开的文件的路径名&#xff0c;可以是绝对路径或者相对路径。例如&#xff0c;"/home/user/…...

编程日记 2024/12/22 21:04:32

源码分析之Openlayers中MousePosition鼠标位置控件

概述 本文主要介绍 Openlayers 中的MousePosition鼠标位置控件&#xff0c;该控件会创建一个元素在页面的右上方用来实时显示鼠标光标的位置坐标。该控件在实际应用很有效&#xff0c;可以实时获取鼠标位置&#xff0c;但是一般控件元素都会自定义。 源码分析 MousePosition…...

编程日记 2024/12/22 21:03:31

以ATTCK为例构建网络安全知识图

ATT&CK&#xff08;Adversarial Tactics, Techniques, and Common Knowledge &#xff09;是一个攻击行为知识库和模型&#xff0c;主要应用于评估攻防能力覆盖、APT情报分析、威胁狩猎及攻击模拟等领域。本文简单介绍ATT&CK相关的背景概念&#xff0c;并探讨通过ATT&a…...

编程日记 2024/12/22 21:01:28

myexcel的使用

参考&#xff1a; &#xff08;1&#xff09;api文档&#xff1a;https://www.bookstack.cn/read/MyExcel-2.x/624d8ce73162300b.md &#xff08;2&#xff09;源代码&#xff1a; https://github.com/liaochong/myexcel/issues 我&#xff1a; &#xff08;1&#xff09;m…...

编程日记 2024/12/22 20:58:26

Unity 上好用的插件

PlayerMaker BehaviorDesigner Cinemachine Timeline Hybrid Addressable AssetBundle Blower Simple Zoom 大地图上缩放和平移使用ScrollRect的好效果实现...

编程日记 2024/12/22 20:55:23

快手无水印下载深度解析：从技术原理到商业应用的完整方案

快手无水印下载深度解析&#xff1a;从技术原理到商业应用的完整方案 【免费下载链接】KS-Downloader 快手&#xff08;KuaiShou&#xff09;视频/图片下载工具&#xff1b;数据采集工具 项目地址: https://gitcode.com/gh_mirrors/ks/KS-Downloader 在短视频内容管理日…...

编程新知 2026/4/2 13:18:29

QT6 + CMake + QML开发：你的图片和QML文件加载不出来？可能是.qrc没配对

QT6 CMake QML开发&#xff1a;资源加载失败的终极排查指南 当你花了几个小时精心设计了QML界面&#xff0c;却在运行时看到一片空白或"找不到文件"的错误提示时&#xff0c;那种挫败感每个QT开发者都深有体会。特别是在QT6和CMake的现代开发环境中&#xff0c;资源…...

编程新知 2026/4/2 12:17:38

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;…...

编程新知 2026/4/2 12:01:26

用LLM自动生成CUDA内核真的靠谱吗？实测KernelBench框架效果与避坑指南

LLM自动生成CUDA内核的实践验证&#xff1a;KernelBench框架深度评测与技术指南 当我在项目中发现某个PyTorch模型的矩阵乘法操作消耗了60%的推理时间时&#xff0c;第一反应是考虑手工编写CUDA内核来优化。但作为一个同时维护三个项目的工程师&#xff0c;时间成本让我犹豫——…...

编程新知 2026/4/2 10:48:19

Phi-3-mini-4k-instruct-gguf快速部署：7860端口网页服务+独立venv隔离环境实录

Phi-3-mini-4k-instruct-gguf快速部署&#xff1a;7860端口网页服务独立venv隔离环境实录 1. 模型简介 Phi-3-mini-4k-instruct-gguf 是微软 Phi-3 系列中的轻量级文本生成模型 GGUF 版本。这个模型特别适合以下场景&#xff1a; 智能问答文本改写与润色内容摘要生成简短创意…...

编程新知 2026/4/2 10:05:49

告别卡顿！Llama-3.2V-11B-cot双卡优化版，流畅体验11B大模型的视觉推理

告别卡顿&#xff01;Llama-3.2V-11B-cot双卡优化版&#xff0c;流畅体验11B大模型的视觉推理 还在为多模态大模型运行卡顿而烦恼&#xff1f;今天要介绍的Llama-3.2V-11B-cot双卡优化版&#xff0c;将彻底改变你对11B参数大模型的认知。这个经过深度优化的视觉推理工具&#…...

编程新知 2026/4/2 7:47:26

近期 GitHub 上爆火的 34 个极具潜力的开源项目

Coasts GitHub 链接&#xff1a;https://github.com/coast-guard/coasts 一款为 Git 工作区打造的本地主机服务隔离与编排工具&#xff0c;由前 Y Combinator 创始人开发。将自主智能体的主机全访问权限这一安全风险规避&#xff0c;智能体可在容器化主机内创建环境、运行服务…...

编程新知 2026/4/2 7:31:14

如何用AI将视频从24FPS提升到120FPS？Video2X帧插值技术全解析

如何用AI将视频从24FPS提升到120FPS&#xff1f;Video2X帧插值技术全解析 【免费下载链接】video2x A machine learning-based video super resolution and frame interpolation framework. Est. Hack the Valley II, 2018. 项目地址: https://gitcode.com/GitHub_Trending/v…...

编程新知 2026/4/2 4:37:27

Escornabot-lib：面向教育机器人的Arduino语义化控制库

1. Escornabot-lib 库概述Escornabot-lib 是一个专为 Escornabot 教育机器人设计的 Arduino C 类库&#xff0c;由 ROBOteach 团队维护&#xff0c;采用 GNU GPL v3.0 开源协议。该库并非仅提供抽象接口&#xff0c;而是完整封装了 Escornabot 硬件平台的全部底层驱动、状态管理…...

编程新知 2026/4/2 4:13:12

DYOR 嘉创地产 02421.HK

文章目录1.公司概况1.1 简介1.2 股权结构1.3 核心资质与定位2.业务布局3.财务与市场表现&#xff1a;业绩承压&#xff0c;规模迷你3.1 业绩大幅下滑3.2 市场表现落后3.3 规模在行业中垫底4.核心优势5.潜在风险与隐忧6.小结参考文献1.公司概况 1.1 简介 嘉创地产是一家脱胎于…...

编程新知 2026/4/2 4:01:07