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

vue3 基于el-tree增加、删除节点(非TypeScript 写法)

话不多说,直接贴代码

<template><div class="custom-tree-container"><!-- <p>Using render-content</p><el-tree style="max-width: 600px" :data="dataSource" show-checkbox node-key="id" default-expand-all:expand-on-click-node="false" :render-content="renderContent" /> --><p>Using scoped slot</p><el-tree style="max-width: 600px" :data="dataSource" show-checkbox node-key="id" default-expand-all:expand-on-click-node="false"><template #default="{ node, data }"><span class="custom-tree-node"><span>{{ node.label }}</span><span><a @click="append(data)"> Append </a><a style="margin-left: 8px" @click="remove(node, data)"> Delete </a></span></span></template></el-tree></div>
</template><script>
import { reactive, ref, toRefs } from 'vue'
// import {Node} from 'element-plus/es/components/tree/src/model/node'export default {name: 'part',setup() {const state = reactive({dataSource: [{id: 1,label: 'Level one 1',children: [{id: 4,label: 'Level two 1-1',children: [{id: 9,label: 'Level three 1-1-1'}]}]}]})const append = (data) => {let treeNodeId = data.$treeNodeId;console.info(data)// alert('当前id'+data.id)// alert(data.$treeNodeId)let id =data.id*100+1const newChild = { id: id, label: data.label+'-'+id, children: [] };if (!data.children) {data.children = [];}data.children.push(newChild);// state.dataSource = [data];}const 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);// dataSource.value = [...dataSource.value];};return {...toRefs(state),append,remove}}
}</script><style>
.custom-tree-node {flex: 1;display: flex;align-items: center;justify-content: space-between;font-size: 14px;padding-right: 8px;
}
</style>

效果如下

在这里插入图片描述

相关文章:

vue3 基于el-tree增加、删除节点(非TypeScript 写法)

话不多说&#xff0c;直接贴代码 <template><div class"custom-tree-container"><!-- <p>Using render-content</p><el-tree style"max-width: 600px" :data"dataSource" show-checkbox node-key"id" …...

小抄 20240607

1 一定要多接触幸运的人&#xff0c;好运的人更有可能继续好运。 这不是迷信&#xff0c;好运的背后是见识、性格、逻辑的加持&#xff0c;一定有过人之处&#xff0c;才能经常好运。 反过来&#xff0c;那些经常走霉运的人&#xff0c;一定是底层逻辑出了问题&#xff0c;陷…...

【GIS教程】土地利用转移矩阵

随着科技社会的不断进步&#xff0c;人类活动对地理环境的影响与塑造日益明显&#xff0c;土地不断的侵蚀与改变也导致一系列的环境问题日益突出。土地利用/覆盖&#xff08;LUCC&#xff09;作为全球环境变化研究的重点问题为越来越多的国际研究机构所重视&#xff0c;研究它的…...

API接口测试工具:jmeter的安装、汉化、Jmeter桌面快捷图标和基本使用

文章目录 测试工具&#xff1a;JmeterJmeter安装和配置Jmeter汉化设置中文语言&#xff1a;永久方式设置中文语言&#xff1a;临时方式 设置Jmeter桌面快捷图标jmeter基本用法Jmeter无法保存测试问题解决 测试工具&#xff1a;Jmeter Jmeter依赖于JDK&#xff0c;所以必须确保…...

电动汽车使用时,这10个方面需要引起重视。

1、续航里程和放电深度有关。为避免放电过深而影响动力电池的性能&#xff0c;建议您在发现车内仪表有低电量警告灯报警时及时充电。这意味着您需要注意电池的电量&#xff0c;并确保在电量不足时及时充电&#xff0c;以保护电池的性能。2、空调的使用会降低整车续航里程。因此…...

SD-WAN加速跨国服务器访问

在当今全球化的商业环境中&#xff0c;企业常常需要从国内访问国外的服务器。然而&#xff0c;由于地理位置和网络架构的限制&#xff0c;这种跨国访问通常会面临速度缓慢和高延迟的问题。SD-WAN&#xff08;软件定义广域网&#xff09;技术的崛起&#xff0c;为企业提供了一种…...

Vue2指令

本节目标 掌握vue指令 定义常用指令案例-小黑记事本指令修饰符 介绍 指令就是带有v-前缀的标签属性, 不同的指令, 可以实现不同的功能 常用指令 渲染指令 语法: v-html 动态渲染标签作用: 动态设置元素的innerHTML场景: 用来动态解析标签 语法: v-text 动态渲染文本会…...

kafka-集群搭建(在docker中搭建)

文章目录 1、kafka集群搭建1.1、下载镜像文件1.2、创建zookeeper容器并运行1.3、创建3个kafka容器并运行1.3.1、9095端口1.3.2、9096端口1.3.3、9097端口 1.4、重启kafka-eagle1.5、查看 efak1.5.1、查看 brokers1.5.2、查看 zookeeper 1、kafka集群搭建 1.1、下载镜像文件 d…...

特征交叉系列:DCN-Mix 混合低秩交叉网络理论和实践

DCN-Mix和DCN-V2的关系 DCN-Mix(a mixture of low-rank DCN)是基于DCN-V2的改进版&#xff0c;它提出使用矩阵分解来降低DCN-V2的时间空间复杂度&#xff0c;又引入多次矩阵分解来达到类似混合专家网络MOE的效果从而提升交叉层的表征能力&#xff0c;若读者对DCN-V2不甚了解可…...

python项目(豆瓣电影)

目录 1、项目效果 2、项目源码 3、技术实现 4、总结 前言 我的这个项目是做的一个豆瓣电影爬取&#xff0c;爬取了豆瓣电影的TOP排行榜的数据 包括电影的名称 演员 评分 评价人数等等 运用了TK布局助手 布了4个界面 有登录 注册 首页 详情 注意&#xff1a;项目并没有连接数…...

精选网络安全书单:打造数字世界的钢铁长城!

目录 1.前言 2.书单推荐 2.1. 《内网渗透实战攻略》 2.2. 《Kali Linux高级渗透测试&#xff08;原书第4版&#xff09;》 2.3. 《CTF那些事儿》 2.4. 《权限提升技术&#xff1a;攻防实战与技巧》 2.5. 《数字政府网络安全合规性建设指南&#xff1a;密码应用与数据安全…...

Ubuntu由于没有公钥,无法验证下列签名。

其他操作系统报错也一样处理&#xff0c;我kali的也是这样解决的。 使用sudo apt update时出现以下错误&#xff1a; 3B4FE6ACC0B21F32就是公钥&#xff0c;每个人的不一样&#xff0c;注意看自己的报错信息 :~$ sudo apt update [sudo] ts 的密码&#xff1a; 命中:1 http:…...

水库安全监测系统:智慧水文动态监测系统

TH-SW2水库安全监测系统&#xff0c;作为一款智慧水文动态监测系统&#xff0c;其在现代水利管理中扮演着至关重要的角色。该系统通过集成先进的数据采集、传输、处理和分析技术&#xff0c;为水库的安全运行提供了强有力的技术支撑。 水库安全监测系统是一种用于实时监测和记…...

下载centos7镜像及在VMware上安装Linux (Centos7)操作系统详细教程

文章目录 下载centos7镜像文件及在VMware上安装centos7详细教程一、下载Centos7镜像二、 利用VM安装Centos7进入VM软件安装配置虚拟机 安装Centos7进入图形化界面配置 三、访问外网 配置IP地址结语Linux配置IP网卡Linux配置本地yum源 下载centos7镜像文件及在VMware上安装cento…...

【全开源】考试答题系统源码(FastAdmin+ThinkPHP+Uniapp)

一款基于FastAdminThinkPHPUniapp开发的小程序答题考试系统&#xff0c;提供全部前后台无加密源代码&#xff0c;支持私有化部署。 &#x1f4dd;考试答题系统&#xff1a;便捷高效的学习新选择&#x1f4a1; &#x1f4da; 考试答题系统是什么&#xff1f; 考试答题系统&…...

toB市场 | 我们喜欢赞助这样的展会活动

过去的六一儿童节&#xff0c;刚去成都参加了个行业内的展会。受护网行动、儿童节等等的影响&#xff0c;这次去成都的客户并不算太多&#xff0c;但会议延续了一贯的高品质&#xff0c;让我们收货满满。 选择目标受众来得多的展会 不同厂商会视自己的产品和模式、目标客户来…...

【学习笔记】Git常用命令

目录 Git常用命令1. git init &#xff08;初始化一个新的Git仓库&#xff09;2. git clone [url] &#xff08;克隆远程仓库到本地计算机&#xff09;3. git status &#xff08;查看当前工作区的状态&#xff09;4. git add [file] &#xff08;将文件添加到暂存区&#xff0…...

【C/C++】IO流

目录 前言&#xff1a; 一&#xff0c;C语言的I/O流 二&#xff0c;C的I/O流 2-1&#xff0c;C标准IO流 2-2&#xff0c;IO流的连续输入 前言&#xff1a; “流”即是流动的意思&#xff0c;是物质从一处向另一处流动的过程&#xff0c;是对一种有序连续且具有方向性的数据…...

Vite5+Vue3整合Tailwindcss详细教程

创建vite项目 执行命令&#xff1a; npm create vite启动项目 npm install -g pnpm pnpm i pnpm dev浏览器访问 http://localhost:5174/ 整合Tailwindcss 安装依赖 pnpm install -D tailwindcss postcss autoprefixer初始化配置文件 npx tailwindcss init用webstorm打开…...

小程序 UI 风格魅力非凡

小程序 UI 风格魅力非凡...

【项目实战】通过多模态+LangGraph实现PPT生成助手

PPT自动生成系统 基于LangGraph的PPT自动生成系统&#xff0c;可以将Markdown文档自动转换为PPT演示文稿。 功能特点 Markdown解析&#xff1a;自动解析Markdown文档结构PPT模板分析&#xff1a;分析PPT模板的布局和风格智能布局决策&#xff1a;匹配内容与合适的PPT布局自动…...

WordPress插件:AI多语言写作与智能配图、免费AI模型、SEO文章生成

厌倦手动写WordPress文章&#xff1f;AI自动生成&#xff0c;效率提升10倍&#xff01; 支持多语言、自动配图、定时发布&#xff0c;让内容创作更轻松&#xff01; AI内容生成 → 不想每天写文章&#xff1f;AI一键生成高质量内容&#xff01;多语言支持 → 跨境电商必备&am…...

leetcodeSQL解题:3564. 季节性销售分析

leetcodeSQL解题&#xff1a;3564. 季节性销售分析 题目&#xff1a; 表&#xff1a;sales ---------------------- | Column Name | Type | ---------------------- | sale_id | int | | product_id | int | | sale_date | date | | quantity | int | | price | decimal | -…...

CMake 从 GitHub 下载第三方库并使用

有时我们希望直接使用 GitHub 上的开源库,而不想手动下载、编译和安装。 可以利用 CMake 提供的 FetchContent 模块来实现自动下载、构建和链接第三方库。 FetchContent 命令官方文档✅ 示例代码 我们将以 fmt 这个流行的格式化库为例,演示如何: 使用 FetchContent 从 GitH…...

tree 树组件大数据卡顿问题优化

问题背景 项目中有用到树组件用来做文件目录&#xff0c;但是由于这个树组件的节点越来越多&#xff0c;导致页面在滚动这个树组件的时候浏览器就很容易卡死。这种问题基本上都是因为dom节点太多&#xff0c;导致的浏览器卡顿&#xff0c;这里很明显就需要用到虚拟列表的技术&…...

力扣-35.搜索插入位置

题目描述 给定一个排序数组和一个目标值&#xff0c;在数组中找到目标值&#xff0c;并返回其索引。如果目标值不存在于数组中&#xff0c;返回它将会被按顺序插入的位置。 请必须使用时间复杂度为 O(log n) 的算法。 class Solution {public int searchInsert(int[] nums, …...

Linux离线(zip方式)安装docker

目录 基础信息操作系统信息docker信息 安装实例安装步骤示例 遇到的问题问题1&#xff1a;修改默认工作路径启动失败问题2 找不到对应组 基础信息 操作系统信息 OS版本&#xff1a;CentOS 7 64位 内核版本&#xff1a;3.10.0 相关命令&#xff1a; uname -rcat /etc/os-rele…...

基于TurtleBot3在Gazebo地图实现机器人远程控制

1. TurtleBot3环境配置 # 下载TurtleBot3核心包 mkdir -p ~/catkin_ws/src cd ~/catkin_ws/src git clone -b noetic-devel https://github.com/ROBOTIS-GIT/turtlebot3.git git clone -b noetic https://github.com/ROBOTIS-GIT/turtlebot3_msgs.git git clone -b noetic-dev…...

音视频——I2S 协议详解

I2S 协议详解 I2S (Inter-IC Sound) 协议是一种串行总线协议&#xff0c;专门用于在数字音频设备之间传输数字音频数据。它由飞利浦&#xff08;Philips&#xff09;公司开发&#xff0c;以其简单、高效和广泛的兼容性而闻名。 1. 信号线 I2S 协议通常使用三根或四根信号线&a…...

数学建模-滑翔伞伞翼面积的设计,运动状态计算和优化 !

我们考虑滑翔伞的伞翼面积设计问题以及运动状态描述。滑翔伞的性能主要取决于伞翼面积、气动特性以及飞行员的重量。我们的目标是建立数学模型来描述滑翔伞的运动状态,并优化伞翼面积的设计。 一、问题分析 滑翔伞在飞行过程中受到重力、升力和阻力的作用。升力和阻力与伞翼面…...