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

打工日记-Vue3+Ts二次封装el-table

el-table是elementUI中的表格组件,在后台把管理系统中,也是一个比较常用的组件,目前有一个比较好的开源项目ProTable,这个项目做的很好,集成了搜索,表格,分页器功能很强大。但在我的实际使用中也有一些需要更改的地方,因此,我也尝试着封装自己的table组件。

需求

  • 定制化:这是最基本的要求,每个表格的表头都是不一样的,封装table组件,首先就要满足它的定制化输入。
  • 表格操作列
  • 末尾添加一行

制作

定制化

让用户能够自定义配置列表项

思路

父子通信,将父组件配置好的columns传递给子组件,然后使用v-for遍历生成表格cell。

实现

首先我们需要在父组件得到传递过来的参数,使用defineProps接收

const props = defineProps({data: {type: Array,default: () => []},config: {type: Object,default: () => ({})}
}

在这里data的就是将来我们接收tabledata的,config则用来接收columns配置
将接收到的数据进行渲染

<el-table-column v-for="(item, index) in config.columns" :key="index"  :label="item.label" :width="item.width"><template #default="{ row }"><el-input class="inputBox" v-if="item.type === 'txt'" v-model="row[item.prop]" /></template>
</el-table-column>

似乎这样,就封装好了一个表格组件,但是实际使用中一点代码提示都没有,我们根本不知道需要组件预留的方法,我们似乎都没怎么使用到TS,因此我们来改造一下代码,为config添加一个config配置文件

type Type = "txt" | "tag";export interface TableColumns<U> {type: Type;prop: keyof U;label: string;width?: number;
}export interface TableConfigTest<T> {columns: TableColumns<T>[];
}

在这个配置文件中声明了两个TS接口,明确columns该怎么写,并且需要接收一个参数,将来使用组件时,将tabledata的类型接口传进来,就会自动解析prop(使用keyof实现,keyof 是 TypeScript 中的一个关键字,用于获取某个类型的所有属性名组成的联合类型)。

现在来重写一下congig,使用类型断言缩小config的类型

config: {type: Object as PropType<TableConfigTest<Object | any>>,default: () => ({})}

这样我们就完成组件的第一个需求,定制化。

表格操作列

因为我只需要一个删除行的操作,所以这里使用了一个简单的方法,就是在组件中直接书写操作

<el-table-column fixed="right" label="操作" width="120"><template #default="{ row }"><el-button type="danger" icon="el-icon-delete" @click="deleteRow(row)"> 删除 </el-button></template>
</el-table-column>

然后将删除方法实现

const deleteRow = (row: any) => {const index = props.data.indexOf(row);if (index > -1) {props.data.splice(index, 1);}
};

使用演示

<MyTable :config="tableConfigEdu" :data="tableDataEdu" :border="true" />
<script setup lang="ts">
interface TableDataTrain {startDate: string;endDate: string;address: string;content: string;
}
const tableConfigTrain = ref<TableConfigTest<TableDataTrain>>({columns: [{type: "txt",prop: "startDate",label: "开始日期",width: 200},{type: "txt",prop: "endDate",label: "截止日期",width: 200},{type: "txt",prop: "address",label: "地点"},{type: "txt",prop: "content",label: "内容"}]
});
const tableDataTrain = ref<TableDataTrain[]>([{ startDate: "", endDate: "", address: "", content: "" }]);
</script>

封装组件是为了更好的工作,随着工作的需求增加,会不断增加组件的功能,同时也会更新文档。

gitee仓库

相关文章:

打工日记-Vue3+Ts二次封装el-table

el-table是elementUI中的表格组件&#xff0c;在后台把管理系统中&#xff0c;也是一个比较常用的组件&#xff0c;目前有一个比较好的开源项目ProTable&#xff0c;这个项目做的很好&#xff0c;集成了搜索&#xff0c;表格&#xff0c;分页器功能很强大。但在我的实际使用中也…...

funbox3靶场渗透笔记

funbox3靶场渗透笔记 靶机地址 https://download.vulnhub.com/funbox/Funbox3.ova 信息收集 fscan找主机ip192.168.177.199 .\fscan64.exe -h 192.168.177.0/24___ _/ _ \ ___ ___ _ __ __ _ ___| | __/ /_\/____/ __|/ __| __/ _ |/ …...

springcloud3 hystrix实现服务降级,熔断,限流以及案例配置

一 hystrix的作用 1.1 降级&#xff0c;熔断&#xff0c;限流 1.服务降级&#xff1a; A方案出现问题&#xff0c;切换到兜底方案B&#xff1b; 2.服务熔断&#xff1a;触发规则&#xff0c;出现断电限闸&#xff0c;服务降级 3.服务限流&#xff1a;限制请求数量。 二 案例…...

ComponentOne Studio ASP.NET MVC Crack

ComponentOne Studio ASP.NET MVC Crack FlexReport增强功能 添加了对在Microsoft Windows上部署Microsoft Azure的支持。 添加了对显示嵌入字体的支持。 .NET标准版的经典C1PDF(Beta版) GrapeCity的经典C1Pdf库现在提供了基于Microsoft.NET标准的版本。在任何.NET应用程序(包括…...

OPENCV C++(十一)

鼠标响应函数 //鼠标响应函数 void on_mouse(int EVENT, int x, int y, int flags, void* userdata) {Mat hh;hh *(Mat*)userdata;switch (EVENT){case EVENT_LBUTTONDOWN:{vP.x x;vP.y y;drawMarker(hh, vP, Scalar(255, 255, 255));//circle(hh, vP, 4, cvScalar(255, 255…...

ES使用心得

客户端 Transport Client已经快要废弃了&#xff0c;官方推荐使用High Level REST Client。 常用命令 启停 systemctl start elasticsearch systemctl stop elasticsearch节点状态 curl http://myservice1:9200/_cat/nodes?vip heap.percent ram.percent cpu l…...

Stable Diffusion - 幻想 (Fantasy) 风格与糖果世界 (Candy Land) 人物提示词配置

欢迎关注我的CSDN&#xff1a;https://spike.blog.csdn.net/ 本文地址&#xff1a;https://spike.blog.csdn.net/article/details/132212193 图像由 DreamShaper8 模型生成&#xff0c;融合糖果世界。 幻想 (Fantasy) 风格图像是一种以想象力为主导的艺术形式&#xff0c;创造了…...

部署K8S集群

目录 一、环境搭建 1、准备环境 2、安装master节点 3、安装k8s-master上的node 4、安装配置k8s-node1节点 5、安装k8s-node2节点 6、为所有node节点配置flannel网络 7、配置docker开启加载防火墙规则允许转发数据 二、k8s常用资源管理 1、创建一个pod 2、pod管理 一、…...

在时间和频率域中准确地测量太阳黑子活动及使用信号处理工具箱(TM)生成广泛的波形,如正弦波、方波等研究(Matlab代码实现)

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…...

一百五十四、Kettle——Linux上安装Kettle9.3(踩坑,亲测有效,附截图)

一、目的 由于kettle8.2在Linux上安装后&#xff0c;共享资源库创建遇到一系列问题&#xff0c;所以就换成kettle9.3 二、kettle版本以及安装包网盘链接 kettle9.3.0安装包网盘链接 链接&#xff1a;https://pan.baidu.com/s/1MS8QBhv9ukpqlVQKEMMHQA?pwddqm0 提取码&…...

PackageNotFoundError: No package metadata was found for bitsandbytes解决方案

大家好,我是爱编程的喵喵。双985硕士毕业,现担任全栈工程师一职,热衷于将数据思维应用到工作与生活中。从事机器学习以及相关的前后端开发工作。曾在阿里云、科大讯飞、CCF等比赛获得多次Top名次。现为CSDN博客专家、人工智能领域优质创作者。喜欢通过博客创作的方式对所学的…...

uni-app和springboot完成前端后端对称加密解密流程

概述 使用对称加密的方式实现。前端基于crypto-js。uni-app框架中是在uni.request的基础上&#xff0c;在拦截器中处理的。springboot在Filter中完成解密工作。 uni-app 项目中引入crypto-js。 npm install crypto-js加密方法 const SECRET_KEY CryptoJS.enc.Utf8.parse(…...

【Unity造轮子】制作一个简单的2d抓勾效果(类似蜘蛛侠的技能)

前言 欢迎阅读本文&#xff0c;本文将向您介绍如何使用Unity游戏引擎来实现一个简单而有趣的2D抓勾效果&#xff0c;类似于蜘蛛侠的独特能力。抓勾效果是许多动作游戏和平台游戏中的常见元素&#xff0c;给玩家带来了无限的想象和挑战。 不需要担心&#xff0c;即使您是一…...

Unity 人物连招(三段连击)

一&#xff1a; 连招思路 首先人物角色上有三个攻击实例对象 Damage,每一个damage定义了攻击的伤害值&#xff0c;攻击距离&#xff0c;触发器名称&#xff0c;伤害的发起者&#xff0c;攻击持续时间&#xff0c;攻击重置时间&#xff0c;伤害的碰撞框大小等字段&#xff1a; …...

关于WSL以及docker连接adb的坑

结论 WSL可以连接到adb&#xff0c;需要和主机保持一致的adb型号。主机是windows还是macOS的docker没法直接连接到adb设备&#xff0c;只有主机为Linux才可以。其他平台只能通过TCP网络协议。 具体过程 关于WSL连接adb设备 windows安装adb工具&#xff08;安装可以去官网下…...

python安装第三方包时报错:...\lib\site-packages\pip\_vendor\urllib3\response.py...

安装redis第三方包&#xff1a; pip install redis报错现象&#xff1a; 解决方法&#xff1a;使用以下命令可成功安装 pip install redis -i http://pypi.douban.com/simple --trusted-host pypi.douban.com...

腾讯云从业者认证考试考点——云存储产品

文章目录 存储产品功能云存储产品概述存储产品存储网关存储服务 存储分类按存储方式分按存储频率分 云存储与传统存储的区别功能需求性能需求容量扩展数据共享 云硬盘CBS产品概述归档存储和文件存储归档存储CAS文件存储CFS 对象存储存储网关存储网关的分类 云数据迁移CDM日志服…...

猿辅导Motiff与IXDC达成战略合作,将在UI设计领域推动AI革新更多可能性

近日&#xff0c;“IXDC 2023国际体验设计大会”在北京国家会议中心拉开序幕&#xff0c;3000设计师、1000企业、200全球商业领袖&#xff0c;共襄为期5天的用户体验创新盛会。据了解&#xff0c;此次大会是以“设计领导力”为主题&#xff0c;分享全球设计、科技、商业的前沿趋…...

条件操作符(三目操作符)

比如之前我们想写一个条件判断表达式是这样写的&#xff1a; 用操作符就可以这样写&#xff1a; 应用&#xff0c;比如求两个数的最大值...

(五)Unity开发Vision Pro——FAQ

常见问题 (FAQ) 1.问&#xff1a;我看到在visionOS 模拟器中运行的结果与在硬件上运行的结果不同 请注意&#xff0c;在模拟器中运行时&#xff0c;某些特定于硬件的功能不可用 - 最明显的是 AR 数据。这可能意味着 VisionOS 模拟器中的模拟结果可能与 Vision Pro 耳机上的模…...

《Qt C++ 与 OpenCV:解锁视频播放程序设计的奥秘》

引言:探索视频播放程序设计之旅 在当今数字化时代,多媒体应用已渗透到我们生活的方方面面,从日常的视频娱乐到专业的视频监控、视频会议系统,视频播放程序作为多媒体应用的核心组成部分,扮演着至关重要的角色。无论是在个人电脑、移动设备还是智能电视等平台上,用户都期望…...

【CSS position 属性】static、relative、fixed、absolute 、sticky详细介绍,多层嵌套定位示例

文章目录 ★ position 的五种类型及基本用法 ★ 一、position 属性概述 二、position 的五种类型详解(初学者版) 1. static(默认值) 2. relative(相对定位) 3. absolute(绝对定位) 4. fixed(固定定位) 5. sticky(粘性定位) 三、定位元素的层级关系(z-i…...

P3 QT项目----记事本(3.8)

3.8 记事本项目总结 项目源码 1.main.cpp #include "widget.h" #include <QApplication> int main(int argc, char *argv[]) {QApplication a(argc, argv);Widget w;w.show();return a.exec(); } 2.widget.cpp #include "widget.h" #include &q…...

用鸿蒙HarmonyOS5实现中国象棋小游戏的过程

下面是一个基于鸿蒙OS (HarmonyOS) 的中国象棋小游戏的实现代码。这个实现使用Java语言和鸿蒙的Ability框架。 1. 项目结构 /src/main/java/com/example/chinesechess/├── MainAbilitySlice.java // 主界面逻辑├── ChessView.java // 游戏视图和逻辑├──…...

spring Security对RBAC及其ABAC的支持使用

RBAC (基于角色的访问控制) RBAC (Role-Based Access Control) 是 Spring Security 中最常用的权限模型&#xff0c;它将权限分配给角色&#xff0c;再将角色分配给用户。 RBAC 核心实现 1. 数据库设计 users roles permissions ------- ------…...

GraphRAG优化新思路-开源的ROGRAG框架

目前的如微软开源的GraphRAG的工作流程都较为复杂&#xff0c;难以孤立地评估各个组件的贡献&#xff0c;传统的检索方法在处理复杂推理任务时可能不够有效&#xff0c;特别是在需要理解实体间关系或多跳知识的情况下。先说结论&#xff0c;看完后感觉这个框架性能上不会比Grap…...

【记录坑点问题】IDEA运行:maven-resources-production:XX: OOM: Java heap space

问题&#xff1a;IDEA出现maven-resources-production:operation-service: java.lang.OutOfMemoryError: Java heap space 解决方案&#xff1a;将编译的堆内存增加一点 位置&#xff1a;设置setting-》构建菜单build-》编译器Complier...

Easy Excel

Easy Excel 一、依赖引入二、基本使用1. 定义实体类&#xff08;导入/导出共用&#xff09;2. 写 Excel3. 读 Excel 三、常用注解说明&#xff08;完整列表&#xff09;四、进阶&#xff1a;自定义转换器&#xff08;Converter&#xff09; 其它自定义转换器没生效 Easy Excel在…...

基于谷歌ADK的 智能产品推荐系统(2): 模块功能详解

在我的上一篇博客&#xff1a;基于谷歌ADK的 智能产品推荐系统(1): 功能简介-CSDN博客 中我们介绍了个性化购物 Agent 项目&#xff0c;该项目展示了一个强大的框架&#xff0c;旨在模拟和实现在线购物环境中的智能导购。它不仅仅是一个简单的聊天机器人&#xff0c;更是一个集…...

项目进度管理软件是什么?项目进度管理软件有哪些核心功能?

无论是建筑施工、软件开发&#xff0c;还是市场营销活动&#xff0c;项目往往涉及多个团队、大量资源和严格的时间表。如果没有一个系统化的工具来跟踪和管理这些元素&#xff0c;项目很容易陷入混乱&#xff0c;导致进度延误、成本超支&#xff0c;甚至失败。 项目进度管理软…...