结合组件库实现table组件树状数据的增删改

如图所示,可以实现树状数据的新增子项,新增平级,删除。主要用到了递归

代码:

<template><el-table :data="tableData" style="width: 100%; margin-bottom: 20px" row-key="id" border default-expand-all><el-table-column prop="date" label="Date" /><el-table-column prop="name" label="Name" /><el-table-column prop="address" label="Address" /><el-table-column label="Operations"><template #default="scope"><el-button size="small" @click="add(scope.row)">新增平级</el-button><el-button size="small" @click="addSon(scope.row)">新增子级</el-button><el-button size="small" type="danger" @click="delItem(scope.row)">删除</el-button></template></el-table-column></el-table>
</template><script lang="ts" setup>
import { ref } from 'vue'const tableData = ref([{id: 1,date: '2016-05-02',name: 'wangxiaohu',address: 'No. 189, Grove St, Los Angeles',},{id: 2,date: '2016-05-04',name: 'wangxiaohu',address: 'No. 189, Grove St, Los Angeles',},{id: 3,date: '2016-05-01',name: 'wangxiaohu',address: 'No. 189, Grove St, Los Angeles',children: [{id: 31,date: '2016-05-01',name: 'wangxiaohu',address: 'No. 189, Grove St, Los Angeles',},{id: 32,date: '2016-05-01',name: 'wangxiaohu',address: 'No. 189, Grove St, Los Angeles',},],},{id: 4,date: '2016-05-03',name: 'wangxiaohu',address: 'No. 189, Grove St, Los Angeles',},
])// 平级新增递归的方法
const addLeaveLoop = (arr: any[], id: number | string) => {for (let i = 0; i < arr.length; i++) {if (arr[i].id === id) {arr.splice(i + 1, 0, { id: +new Date(), date: '2023-11-03', name: '辉辉', address: 'dashjdsakljdl' })} else if (arr[i].children) {arr[i].children = addLeaveLoop(arr[i].children, id)}}return arr
}
// 新增平级
const add = (row: any) => {addLeaveLoop(tableData.value, row.id)
}// 新增一个子节点的方法
const addSonLoop = (arr: any[], id: number | string) => {for (let i = 0; i < arr.length; i++) {if (arr[i].id === id) {// 判断有没有children,有就前面新增,没有就创建if (arr[i].children && arr[i].children.length) {arr[i].children.unshift({ id: +new Date(), date: '2023-11-03', name: '张三', address: 'dashjdsakljdl' })} else {arr[i].children = [{ id: +new Date(), date: '2023-11-03', name: '李四', address: 'dashjdsakljdl' }]}} else if (arr[i].children) {arr[i].children = addSonLoop(arr[i].children, id)}}return arr
}
// 新增子级
const addSon = (row: any) => {addSonLoop(tableData.value, row.id)
}// 删除递归的方法
const delLoop = (arr: any[], id: number | string) => {for (let i = 0; i < arr.length; i++) {if (arr[i].id === id) {arr.splice(i, 1)} else if (arr[i].children) {arr[i].children = delLoop(arr[i].children, id)}}return arr
}
// 删除
const delItem = (row: any) => {delLoop(tableData.value, row.id)
}
</script>

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

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

相关文章

代码随想录算法训练营第11天|20. 有效的括号 1047. 删除字符串中的所有相邻重复项 150. 逆波兰表达式求值

JAVA代码编写 20. 有效的括号 给定一个只包括 (&#xff0c;)&#xff0c;{&#xff0c;}&#xff0c;[&#xff0c;] 的字符串 s &#xff0c;判断字符串是否有效。 有效字符串需满足&#xff1a; 左括号必须用相同类型的右括号闭合。左括号必须以正确的顺序闭合。每个右括…

[2016-2018]phpstudy的exp制作

[2016-2018]phpstudy的exp制作 用python的requests模块进行编写 修改请求数据包进行远程代码执行 import requests import base64 def remove_code_execute():try:url input("请输入要测试的网址:")cmd input("想要执行的命令:")cmd f"system({…

Adobe After Effects 2024(Ae2024)在新版本中的升级有哪些?

After Effects 2024是Adobe公司推出的一款视频处理软件&#xff0c;它适用于从事设计和视频特技的机构&#xff0c;包括电视台、动画制作公司、个人后期制作工作室以及多媒体工作室。通过After Effects&#xff0c;用户可以高效且精确地创建无数种引人注目的动态图形和震撼人心…

“深入理解Nginx的负载均衡与动静分离“

目录 引言一、Nginx简介1. Nginx的基本概念2. Nginx的特点3. Nginx的安装配置 二、Nginx搭载负载均衡三、前端项目打包四、Nginx部署前后端分离项目&#xff0c;同时实现负载均衡和动静分离总结 引言 在现代互联网应用中&#xff0c;高性能和可扩展性是至关重要的。Nginx作为一…

[SSD综述 1.4] SSD固态硬盘的架构和功能导论

依公知及经验整理,原创保护,禁止转载。 专栏 《SSD入门到精通系列》 <<<< 返回总目录 <<<< ​ 前言 机械硬盘的存储系统由于内部结构, 其IO访问性能无法进一步提高,CPU与存储器之间的性能差距逐渐扩大。以Nand Flash为存储介质的固态硬盘技术的发展,…

css 图片好玩的一个属性,添加滤镜

鼠标经过效果对比&#xff1a; 上图是改变了图片的饱和度&#xff0c;代码如下&#xff1a; .img-box .v-image:hover {filter: saturate(1.75); }其他滤镜说明如下图&#xff1a;

Hive 解析 JSON 字符串数据的实现方式

文章目录 通过方法解析现实示例 通过序列化实现示例 通过方法解析现实 在 Hive 中提供了直接解析 JSON 字符串数据的方法 get_json_object(json_txt, path)&#xff0c;该方法参数解析如下&#xff1a; json_txt&#xff1a;顾名思义&#xff0c;就是 JSON 字符串&#xff1b;…

vue+asp.net Web api前后端分离项目发布部署

一、前后端项目介绍 1.前端项目是使用vue脚手架进行创建的。 脚手架版本&#xff1a;vue/cli 5.0.8 编译器版本&#xff1a;vs code 1.82.2 2.后端是一个asp.net Core Web API 项目 后端框架版本&#xff1a;.NET 6.0 编译器版本&#xff1a;vs 2022 二、发布部署步骤 第…

东北大学python大作业

目前金属矿开采&#xff0c;爆破还是主要的破岩方式&#xff0c;为了保证巷道采场的安全&#xff0c;需要对爆破震动进行监测&#xff0c;获取的监测数据如附件&#xff0c;第1列数据为震动的序号&#xff0c;第2、3、4列为x,y,z三个方向的震动速度&#xff0c;往往由于各种因素…

零信任网络:一种全新的网络安全架构

随着网络技术的不断发展&#xff0c;网络安全问题日益凸显。传统的网络安全策略往往基于信任和验证&#xff0c;但这种信任策略存在一定的局限性。为了解决这一问题&#xff0c;零信任网络作为一种全新的网络安全架构&#xff0c;逐渐受到人们的关注。本文将对零信任网络的概念…

Selenium元素定位之页面检测技巧

在进行web自动化测试的时候进行XPath或者CSS定位&#xff0c;需要检测页面元素定位是否正确&#xff0c;如果用脚本去检测&#xff0c;那么效率是极低的。 一般网上推选装额外的插件来实现页面元素定位检测 如&#xff1a;firebug。 其实F12开发者工具就能直接在页面上检测元…

Windows Server 2016使用MBR2GPT.EXE教程!

什么是MBR2GPT.exe&#xff1f; MBR2GPT.exe是微软提供的专业工具&#xff0c;可在命令提示符下运行。使用该工具可以将引导磁盘从MBR转换为GPT分区样式&#xff0c;而无需修改或删除所选磁盘上的任何内容。 在Windows Server 2019和Windows 10&#xff08;1703…