当前位置: 首页 > 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 耳机上的模…...

使用VSCode开发Django指南

使用VSCode开发Django指南 一、概述 Django 是一个高级 Python 框架&#xff0c;专为快速、安全和可扩展的 Web 开发而设计。Django 包含对 URL 路由、页面模板和数据处理的丰富支持。 本文将创建一个简单的 Django 应用&#xff0c;其中包含三个使用通用基本模板的页面。在此…...

循环冗余码校验CRC码 算法步骤+详细实例计算

通信过程&#xff1a;&#xff08;白话解释&#xff09; 我们将原始待发送的消息称为 M M M&#xff0c;依据发送接收消息双方约定的生成多项式 G ( x ) G(x) G(x)&#xff08;意思就是 G &#xff08; x ) G&#xff08;x) G&#xff08;x) 是已知的&#xff09;&#xff0…...

关于iview组件中使用 table , 绑定序号分页后序号从1开始的解决方案

问题描述&#xff1a;iview使用table 中type: "index",分页之后 &#xff0c;索引还是从1开始&#xff0c;试过绑定后台返回数据的id, 这种方法可行&#xff0c;就是后台返回数据的每个页面id都不完全是按照从1开始的升序&#xff0c;因此百度了下&#xff0c;找到了…...

使用van-uploader 的UI组件,结合vue2如何实现图片上传组件的封装

以下是基于 vant-ui&#xff08;适配 Vue2 版本 &#xff09;实现截图中照片上传预览、删除功能&#xff0c;并封装成可复用组件的完整代码&#xff0c;包含样式和逻辑实现&#xff0c;可直接在 Vue2 项目中使用&#xff1a; 1. 封装的图片上传组件 ImageUploader.vue <te…...

自然语言处理——循环神经网络

自然语言处理——循环神经网络 循环神经网络应用到基于机器学习的自然语言处理任务序列到类别同步的序列到序列模式异步的序列到序列模式 参数学习和长程依赖问题基于门控的循环神经网络门控循环单元&#xff08;GRU&#xff09;长短期记忆神经网络&#xff08;LSTM&#xff09…...

select、poll、epoll 与 Reactor 模式

在高并发网络编程领域&#xff0c;高效处理大量连接和 I/O 事件是系统性能的关键。select、poll、epoll 作为 I/O 多路复用技术的代表&#xff0c;以及基于它们实现的 Reactor 模式&#xff0c;为开发者提供了强大的工具。本文将深入探讨这些技术的底层原理、优缺点。​ 一、I…...

【Oracle】分区表

个人主页&#xff1a;Guiat 归属专栏&#xff1a;Oracle 文章目录 1. 分区表基础概述1.1 分区表的概念与优势1.2 分区类型概览1.3 分区表的工作原理 2. 范围分区 (RANGE Partitioning)2.1 基础范围分区2.1.1 按日期范围分区2.1.2 按数值范围分区 2.2 间隔分区 (INTERVAL Partit…...

USB Over IP专用硬件的5个特点

USB over IP技术通过将USB协议数据封装在标准TCP/IP网络数据包中&#xff0c;从根本上改变了USB连接。这允许客户端通过局域网或广域网远程访问和控制物理连接到服务器的USB设备&#xff08;如专用硬件设备&#xff09;&#xff0c;从而消除了直接物理连接的需要。USB over IP的…...

LeetCode - 199. 二叉树的右视图

题目 199. 二叉树的右视图 - 力扣&#xff08;LeetCode&#xff09; 思路 右视图是指从树的右侧看&#xff0c;对于每一层&#xff0c;只能看到该层最右边的节点。实现思路是&#xff1a; 使用深度优先搜索(DFS)按照"根-右-左"的顺序遍历树记录每个节点的深度对于…...

【VLNs篇】07:NavRL—在动态环境中学习安全飞行

项目内容论文标题NavRL: 在动态环境中学习安全飞行 (NavRL: Learning Safe Flight in Dynamic Environments)核心问题解决无人机在包含静态和动态障碍物的复杂环境中进行安全、高效自主导航的挑战&#xff0c;克服传统方法和现有强化学习方法的局限性。核心算法基于近端策略优化…...