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

vue3+ts+elementui-plus二次封装树形表格

复制粘贴即可:

一、定义table组件

<template><div class='main'><div><el-table ref="multipleTableRef" :height="height" :default-expand-all="isExpend" :data="treeTableData"style="width: 100%; margin-bottom: 20px" row-key="id" border><el-table-column :width="item.width" :fixed="item.fixed" show-overflow-tooltip align="center"v-for="(item, i) in treeTableProps" :key="i" :label="item.label"><template #default="scope"><!-- 自定义插槽展示 --><slot v-if="item.slot" :name="item.prop" :scope="scope"></slot><!-- 非自定义处理(判空) --><span v-else-if="scope.row[item.prop] === '' || scope.row[item.prop] === null">--</span><!-- 非自定义处理(正常展示) --><span v-else>{{ scope.row[item.prop] }}</span></template></el-table-column></el-table></div></div>
</template><script lang="ts" setup>
import { ref, reactive, getCurrentInstance, onMounted } from 'vue'
interface Props {// 属性名prop: string,// 属性标签label: string,// 是否固定(非必填)fixed?: boolean,// 行宽(非必填)width?: number,// 是否显示插槽(非必填)slot?: boolean,
}
const props = defineProps({/** 表格数据 */treeTableData: {type: Array,default: null,required: true},/** 表格属性 */treeTableProps: {type: Array<Props>,default: null,required: true},/** 是否默认全部展开 */isExpend: {type: Boolean,default: false,required: false},/** 表格高度 */height: {type: String,default: '60vh',required: false}
})onMounted(() => {
})</script>
<style scoped lang='less'>
//添加你想设置的样式
</style>

二、在父组件中使用

<template><div class='main'><TableTree :treeTableData="tableData" :treeTableProps="treeTableProps"><!-- 插槽展示 --><template #address><el-input size="small" placeholder="Type to input" /></template></TableTree></div>
</template><script lang='ts' setup>
import TableTree from '@/components/BaseTableTree/index.vue'
import { ref, reactive, getCurrentInstance, onMounted } from 'vue'
// 定义表格数据接口
interface User {id: numberdate: stringname: stringaddress: stringhasChildren?: booleanchildren?: User[]
}
// 定义表格头部属性名
const treeTableProps = [{ prop: 'date', label: '日期', width: 300, fixed: true, },{ prop: 'name', label: '名称', },{ prop: 'address', label: '地址', slot: true, },
]
// 定义表格假数据
const tableData: User[] = [{id: 1,date: '2016-05-04',name: '',address: 'No. 189, Grove St, Los Angeles',},{id: 2,date: '2016-05-04',name: '小明',address: 'No. 189, Grove St, Los Angeles',},{id: 3,date: '2016-05-01',name: '小明',address: 'No. 189, Grove St, Los Angeles',children: [{id: 31,date: '2016-05-01',name: '小明',address: 'No. 189, Grove St, Los Angeles',children: [{id: 311,date: '2016-05-01',name: '小明',address: 'No. 189, Grove St, Los Angeles',},{id: 312,date: '2016-05-01',name: '小明',address: 'No. 189, Grove St, Los Angeles',}]},{id: 32,date: '2016-05-01',name: '小明',address: 'No. 189, Grove St, Los Angeles',},],},{id: 4,date: '2016-05-03',name: '小明',address: 'No. 189, Grove St, Los Angeles',},
]
onMounted(() => {
})</script>

三、运行查看效果

 

相关文章:

vue3+ts+elementui-plus二次封装树形表格

复制粘贴即可&#xff1a; 一、定义table组件 <template><div classmain><div><el-table ref"multipleTableRef" :height"height" :default-expand-all"isExpend" :data"treeTableData"style"width: 100%…...

机器学习/深度学习常见算法实现(秋招版)

包括BN层、卷积层、池化层、交叉熵、随机梯度下降法、非极大抑制、k均值聚类等秋招常见的代码实现。 1. BN层 import numpy as npdef batch_norm(outputs, gamma, beta, epsilon1e-6, momentum0.9, running_mean0, running_var1)::param outputs: [B, L]:param gamma: mean:p…...

京东技术专家首推:Spring 微服务架构设计,GitHub 星标 128K

前言 本书提供了实现大型响应式微服务的实用方法和指导原则&#xff0c;并通过示例全面 讲解如何构建微服务。本书深入介绍了 Spring Boot、Spring Cloud、 Docker、Mesos 和 Marathon&#xff0c;还会教授如何用 Spring Boot 部署自治服务&#xff0c;而 无须使用重量级应用服…...

R语言--森林图制作

#数据准备- data5 #install.packages("rmda")rm(list=ls())library(MASS)library(rmda)library(dplyr) #mutate依赖环境library(magrittr) #%>%依赖setwd("D:/R/nomo5new2")data...

Tomcat中利用war包部署

在Tomcat中利用war包部署Web应用程序时&#xff0c;默认情况下&#xff0c;应用程序的上下文路径&#xff08;也称为项目名称&#xff09;将是war文件的名称&#xff08;去除.war扩展名&#xff09;。这意味着您在访问Web应用程序时必须在URL中包含项目名称。例如&#xff0c;如…...

[JAVAee]线程安全

目录 线程安全的理解 线程不安全的原因 ①非原子性 ②可见性 ③代码重排序 体会何为不安全的线程 保证线程安全 一个代码在多线程的环境下就很容易出现错误. 线程安全的理解 线程安全是什么呢?通俗的来讲,线程安全就是在多线程的环境下,代码的结果是符合我们预期的,就…...

ELK环境搭建——概况

Elastic Stack,核心产品包括 Elasticsearch、Kibana、Beats 和 Logstash等等。能够安全可靠地从任何来源获取任何格式的数据,然后对数据进行搜索、分析和可视化。 目录 一:Elasticsearch: 1.1 从数据中探寻各种问题的答案 1.1.1 定义您自己的搜索方式...

面试知识点整理

计算机的物理内存是有限的&#xff0c;所以操作系统在遇到内存不足时&#xff0c;会通过换页机制暂时把 某个进程未使用的内存中的数据搬移到硬盘上&#xff08;比如 Linux 的 swap 分区&#xff09;&#xff0c;并在系统页表中 删除相应的表项。当该进程访问数据已经被搬移到硬…...

腾讯云服务器CVM计算型c6/c5实例CPU型号、处理器主频大全

腾讯云服务器CVM计算型C6、C5、C4、CN3、C3和C2实例&#xff0c;计算型C6云服务器CPU采用Intel Xeon Ice Lake处理器&#xff0c;主频3.2GHz&#xff0c;睿频3.5GHz&#xff0c;腾讯云服务器网分享更多计算型CVM云服务器CPU型号、处理器主频性能说明&#xff1a; 目录 云服务…...

vue3笔记-脚手架篇

第一章 基础篇 第二章 脚手架篇 vue2与vue3的一些区别 响应式系统&#xff1a; Vue 2 使用 Object.defineProperty 进行响应式数据的劫持和监听&#xff0c;它对数据监听是一项项的进行监听&#xff0c;因此&#xff0c;当新增属性发生变化时&#xff0c;它无法监测到&…...

数字的补数

题目&#xff1a; 对整数的二进制表示取反&#xff08;0 变 1 &#xff0c;1 变 0&#xff09;后&#xff0c;再转换为十进制表示&#xff0c;可以得到这个整数的补数。 例如&#xff0c;整数 5 的二进制表示是 "101" &#xff0c;取反后得到 "010" &…...

Taskfile demo

https://github.com/yangyang5214/blog/issues/1 makefile 很好用&#xff0c;但是有些语法我不会。 go-task yml & shell 不错&#xff0c;推荐 Taskfile.yml https://github.com/go-task/task/blob/main/.golangci.yml # go install github.com/go-task/task/v3/cmd/ta…...

MyBatis学习笔记之高级映射及延迟加载

文章目录 环境搭建&#xff0c;数据配置多对一的映射的思路逻辑级联属性映射association分布查询 一对多的映射的思路逻辑collection分布 环境搭建&#xff0c;数据配置 t_class表 t_stu表 多对一的映射的思路逻辑 多对一&#xff1a;多个学生对应一个班级 多的一方是st…...

小程序如何删除/上架/下架商品

在小程序中&#xff0c;产品的删除、上架和下架是常见的操作&#xff0c;可以根据实际需求来管理商品的展示与销售。下面将介绍如何在小程序中删除上架下架商品的具体步骤。 进入商品管理页面&#xff0c; 在个人中心点击管理入口&#xff0c;然后找到“商品管理”菜单并点击。…...

Failed to load local font resource:微信小程序加载第三方字体

加载本地字体.ttf 将ttf转换为base64格式&#xff1a;https://transfonter.org/ 步骤如下 将下载后的stylesheet.css 里的font-family属性名字改一下&#xff0c;然后引进页面里就行了&#xff0c;全局样式就放app.scss&#xff0c;单页面就引入单页面 注&#xff1a; .title…...

使用fastjson错误

说明&#xff1a;使用fastjson时&#xff0c;对象解析不成功&#xff0c;一直报错&#xff0c;但是json格式没有错&#xff1b; 错误信息&#xff1a;Method threw ‘com.alibaba.fastjson.JSONException’ exception. json数据是正确的 分析&#xff1a;注意看&#xff0c;fa…...

【GitOps系列】使用Kustomize和Helm定义应用配置

文章目录 使用 Kustomize 定义应用改造示例应用1.创建基准和多环境目录2.环境差异分析3.为 Base 目录创建通用 Manifest4.为开发环境目录创建差异 Manifest5.为预发布环境创建差异 Manifest6.为生产环境创建差异 Manifest 部署 Kustomize 应用部署到开发环境部署到生产环境 使用…...

Android kotlin高阶函数与Java lambda表达式介绍与实战

一、介绍 目前在Java JDK版本的不断升高&#xff0c;新的表达式已开始出现&#xff0c;但是在Android混淆开发中&#xff0c;kotlin的语言与Java的语言是紧密贴合的。所以Java lambda表达式在kotlin中以新的身份出现&#xff1a;高阶函数与lambda表达式特别类似。接下来我讲会先…...

自然语言处理实战项目13-基于GRU模型与NER的关键词抽取模型训练全流程

大家好&#xff0c;我是微学AI&#xff0c;今天给大家介绍一下自然语言处理实战项目13-基于GRU模型与NER的关键词抽取模型训练全流程。本文主要介绍关键词抽取样例数据、GRU模型模型构建与训练、命名实体识别(NER)、模型评估与应用&#xff0c;项目的目标是通过训练一个GRU模型…...

7.26 Qt

用QT制作一个登陆界面 运行代码 login.h #ifndef WIDGET_H #define WIDGET_H#include <QWidget> #include <QDebug> //信息调试类&#xff0c;用于输出 #include <QIcon> //图标类头文件 #include <QPushButton&…...

Python|GIF 解析与构建(5):手搓截屏和帧率控制

目录 Python&#xff5c;GIF 解析与构建&#xff08;5&#xff09;&#xff1a;手搓截屏和帧率控制 一、引言 二、技术实现&#xff1a;手搓截屏模块 2.1 核心原理 2.2 代码解析&#xff1a;ScreenshotData类 2.2.1 截图函数&#xff1a;capture_screen 三、技术实现&…...

C++初阶-list的底层

目录 1.std::list实现的所有代码 2.list的简单介绍 2.1实现list的类 2.2_list_iterator的实现 2.2.1_list_iterator实现的原因和好处 2.2.2_list_iterator实现 2.3_list_node的实现 2.3.1. 避免递归的模板依赖 2.3.2. 内存布局一致性 2.3.3. 类型安全的替代方案 2.3.…...

springboot 百货中心供应链管理系统小程序

一、前言 随着我国经济迅速发展&#xff0c;人们对手机的需求越来越大&#xff0c;各种手机软件也都在被广泛应用&#xff0c;但是对于手机进行数据信息管理&#xff0c;对于手机的各种软件也是备受用户的喜爱&#xff0c;百货中心供应链管理系统被用户普遍使用&#xff0c;为方…...

3.3.1_1 检错编码(奇偶校验码)

从这节课开始&#xff0c;我们会探讨数据链路层的差错控制功能&#xff0c;差错控制功能的主要目标是要发现并且解决一个帧内部的位错误&#xff0c;我们需要使用特殊的编码技术去发现帧内部的位错误&#xff0c;当我们发现位错误之后&#xff0c;通常来说有两种解决方案。第一…...

条件运算符

C中的三目运算符&#xff08;也称条件运算符&#xff0c;英文&#xff1a;ternary operator&#xff09;是一种简洁的条件选择语句&#xff0c;语法如下&#xff1a; 条件表达式 ? 表达式1 : 表达式2• 如果“条件表达式”为true&#xff0c;则整个表达式的结果为“表达式1”…...

相机从app启动流程

一、流程框架图 二、具体流程分析 1、得到cameralist和对应的静态信息 目录如下: 重点代码分析: 启动相机前,先要通过getCameraIdList获取camera的个数以及id,然后可以通过getCameraCharacteristics获取对应id camera的capabilities(静态信息)进行一些openCamera前的…...

VTK如何让部分单位不可见

最近遇到一个需求&#xff0c;需要让一个vtkDataSet中的部分单元不可见&#xff0c;查阅了一些资料大概有以下几种方式 1.通过颜色映射表来进行&#xff0c;是最正规的做法 vtkNew<vtkLookupTable> lut; //值为0不显示&#xff0c;主要是最后一个参数&#xff0c;透明度…...

c#开发AI模型对话

AI模型 前面已经介绍了一般AI模型本地部署&#xff0c;直接调用现成的模型数据。这里主要讲述讲接口集成到我们自己的程序中使用方式。 微软提供了ML.NET来开发和使用AI模型&#xff0c;但是目前国内可能使用不多&#xff0c;至少实践例子很少看见。开发训练模型就不介绍了&am…...

mysql已经安装,但是通过rpm -q 没有找mysql相关的已安装包

文章目录 现象&#xff1a;mysql已经安装&#xff0c;但是通过rpm -q 没有找mysql相关的已安装包遇到 rpm 命令找不到已经安装的 MySQL 包时&#xff0c;可能是因为以下几个原因&#xff1a;1.MySQL 不是通过 RPM 包安装的2.RPM 数据库损坏3.使用了不同的包名或路径4.使用其他包…...

Typeerror: cannot read properties of undefined (reading ‘XXX‘)

最近需要在离线机器上运行软件&#xff0c;所以得把软件用docker打包起来&#xff0c;大部分功能都没问题&#xff0c;出了一个奇怪的事情。同样的代码&#xff0c;在本机上用vscode可以运行起来&#xff0c;但是打包之后在docker里出现了问题。使用的是dialog组件&#xff0c;…...