Vue前端的工作需求

加油,新时代打工人!

需求:
实现带树形结构的表格,父数据显示新增下级,和父子都显示编辑。
技术:
Vue3 +Element Plus

<template><div><el-table:data="tableData"style="width: 100%; margin-bottom: 20px"row-key="id"borderdefault-expand-all><el-table-column prop="date" label="Date" sortable /><el-table-column prop="name" label="Name" sortable /><el-table-column prop="address" label="Address" sortable />  <el-table-column><el-tooltip :content="'Switch value: ' + value" placement="top"><el-switchv-model="value"style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"active-value="100"inactive-value="0"/></el-tooltip> </el-table-column><el-table-column align="right"><template #default="scope"><el-buttonv-if="[1, 2, 3, 4].includes(scope.row.id)"size="small" @click="handleEdit(scope.$index, scope.row)">新增下级</el-button><el-buttonsize="small"type="danger"@click="handleDelete(scope.$index, scope.row)">编辑</el-button></template></el-table-column></el-table></div>
</template><script lang="ts" setup>
import {ref} from "vue"
interface User {id: numberdate: stringname: stringaddress: stringhasChildren?: booleanchildren?: User[]}const tableData: User[] = [{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 handleEdit = (index: number, row: User) => {
console.log(row)
}const value = ref('0')</script>

在这里插入图片描述

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

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

相关文章

了解游戏中的数据同步

目录 数据同步 通过比较来看状态同步和帧同步 状态同步 帧同步 帧同步实现需要的条件 两者相比较 数据同步 在联机游戏中&#xff0c;我的操作和数据要同步给同一局游戏中其他所有玩家&#xff0c;其他玩家的操作和数据也会同步给我。这叫做数据同步&#xff0c;目前数据…

国产数据库概述

这是ren_dong的第33篇原创 1、什么是数据库&#xff1f; 1.1、基本概念 定义&#xff1a;数据库是 按照一定的数据结构组织、存储和管理数据的仓库。可视为电子化的文件柜&#xff0c;用户可以对文件中的数据进行新增、查询、更新、删除等操作。 作用&#xff1a;业务数据 存储…

kettle下载及安装

JDK下载 安装kettle之前需要安装JDK JDK下载链接&#xff1a;JDK下载 配置环境变量&#xff1a; 新建系统变量&#xff1a;变量值为JDK安装路径 Path新增&#xff1a; kettle下载 链接地址&#xff1a;PDI&#xff08;kettle&#xff09; 点击下载 同意 Click here to a…

【XIAO ESP32S3 sense 通过 ESPHome 与 Home Assistant 连接】

XIAO ESP32S3 sense 通过 ESPHome 与 Home Assistant 连接 1. 什么是 ESPHome 和 Home Assistant&#xff1f;2. 软件准备3. 开始4. 将 Grove 模块与 ESPHome 和 Home Assistant 连接5. Grove 连接和数据传输6. Grove -智能空气质量传感器 &#xff08;SGP41&#xff09;7. OV2…

Filter(过滤器)

文章目录 过滤器的编写&#xff1a;过滤器 APIFilterFilterConfigFilterChain 生命周期过滤器核心方法的细节多个过滤器执行顺序<br /> 过滤器——Filter&#xff0c;它是JavaWeb三大组件之一。另外两个是Servlet和Listener。 它是在2000年发布的Servlet2.3规范中加入的一…

百度文库旋转验证码识别

最近研究了一下图像识别&#xff0c;一直找到很好的应用场景&#xff0c;今天我就发现可以用百度的旋转验证码来做一个实验。没想到效果还挺好&#xff0c;下面就是实际的识别效果。 1、效果演示 2、如何识别 2.1准备数据集 首先需要使用爬虫&#xff0c;对验证码图片进行采…

区块链媒体发布推广10个热门案例解析-华媒舍

区块链技术的发展已经引起了媒体的广泛关注&#xff0c;越来越多的区块链媒体纷纷发布推广相关的热门案例。本文将介绍10个成功的区块链媒体推广案例&#xff0c;并分享它们的成功秘诀&#xff0c;帮助读者更好地了解区块链媒体推广的方法与技巧。 随着区块链技术的成熟和应用场…

第二证券:富时罗素扩容 A股引入国际增量资金

日前&#xff0c;英国富时罗素指数公司&#xff08;FTSE Russell&#xff0c;简称“富时罗素”&#xff09;公布的全球股票指数&#xff08;FTSE Global Equity Index Series&#xff09;半年度指数检查陈述显现&#xff0c;将新调入A股76只、调出1只。此前&#xff0c;富时罗素…

【LeetCode】升级打怪之路 Day 12:单调队列

今日题目&#xff1a; 239. 滑动窗口最大值 | LeetCode 今天学习了单调队列这种特殊的数据结构&#xff0c;思路很新颖&#xff0c;值得学习。 Problem&#xff1a;单调队列 【必会】 与单调栈类似&#xff0c;单调队列也是一种特殊的数据结构&#xff0c;它相比与普通的 que…

Get Your Back Covered! Coverage, CodeCov和Tox

1. Coverage - 衡量测试的覆盖率 我们已经掌握了如何进行单元测试。接下来,一个很自然的问题浮现出来,我们如何知道单元测试的质量呢?这就提出了测试覆盖率的概念。覆盖率测量通常用于衡量测试的有效性。它可以显示您的代码的哪些部分已被测试过,哪些没有。 coverage.py …

智慧公厕:打造智慧城市的环卫明珠

在城市建设中&#xff0c;公共卫生设施的完善和智能化一直是重要环节。而智慧公厕作为智慧城市建设的重要组成部分&#xff0c;发挥着不可替代的作用。本文以智慧公厕源头实力厂家广州中期科技有限公司&#xff0c;大量精品案例现场实景实图&#xff0c;解读智慧公厕如何助力打…

【数据结构】B树

1 B树介绍 B树&#xff08;英语&#xff1a;B-tree&#xff09;&#xff0c;是一种在计算机科学自平衡的树&#xff0c;能够保持数据有序。这种数据结构能够让查找数据、顺序访问、插入数据及删除的动作&#xff0c;都在对数时间内完成。B树&#xff0c;概括来说是一个一般化的…

MySQL高可用性攻略:快速搭建MySQL主从复制集群 !

MySQL高可用性攻略&#xff1a;快速搭建MySQL主从复制集群 &#xff01; MySQL基础知识&#xff1a;介绍MySQL数据库的基本概念和常用命令&#xff0c;如何创建数据库、表、用户和权限管理等。 MySQL安装教程&#xff1a;Centos7 安装MySQL5.7.29详细安装手册 MySQL数据类型&…

【大厂AI课学习笔记NO.63】模型的维护

说是模型的维护&#xff0c;其实这堂课都是在讲“在工业环境中开发和部署机器学习模型的流程”。 上图来自于我的笔记思维脑图&#xff0c;已经上传&#xff0c;要链接的访问的主页查看资源。 一路走来&#xff0c;我们学习了数据管理、模型学习、模型验证、模型部署等重要的步…

arm板运行程序时寻找动态库的路径设置

问题&#xff1a;error while loading shared libraries: libQt5Widgets.so.5: cannot open shared object file&#xff1f; 第一种方法---- 解决&#xff1a; ①复制需要用到的arm库到板子上。 ②pwd指令获取该库的绝对路径&#xff0c;把路径复制到/etc/ld.so.conf文件 ③输…

Leetcoder Day37| 动态规划part04 背包问题

01背包理论基础 面试掌握01背包&#xff0c;完全背包和重背包就够用了。 背包问题的理论基础重中之重是01背包&#xff0c;一定要理解透&#xff01; 01 背包 有n件物品和一个最多能背重量为w 的背包。第i件物品的重量是weight[i]&#xff0c;得到的价值是value[i] 。每件物品…

css通过calc动态计算宽度

max-width: calc(100% - 40px) .m-mj-status-drawing-info-data{ display: inline-block; margin: 10px; min-width: 200px; padding: 10px;border-radius: 10px; background: #ddd;max-width: calc(100% - 40px);word-wrap: break-word;white-space: pre-line;}我开发的chatg…

C语言-柔性数组成员的使用

文章目录 摘要柔性数组成员基本使用细节探究 零长度数组-定长数组-变长数组 摘要 本文先介绍柔性数组成员(flexible array member)的基本使用&#xff0c;然后介绍其内存结构。最后&#xff0c;补充了一些数组相关的其他概念。 柔性数组成员 基本使用 参考: 【C语言内功修炼…

[项目设计] 从零实现的高并发内存池(一)

&#x1f308; 博客个人主页&#xff1a;Chris在Coding &#x1f3a5; 本文所属专栏&#xff1a;[高并发内存池] ❤️ 前置学习专栏&#xff1a;[Linux学习] ⏰ 我们仍在旅途 ​ 目录 前言 项目介绍 1.内存池 1.1 什么是内存池 池化技术 内存池 1.2 为什…

word使用bib添加参考文献

文章目录 安装TexLive安装bibtex4word使用在word中添加参考文献使用bibtex4word在word中添加参考文献设置参考文献格式为毕业论文格式 参考 安装TexLive 从下载地址下载镜像iso文件texlive2023.iso双击打开iso镜像文件运行 install-tl-windows.bat点击安装非常非常非常耐心地安…