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

前端内部技术分享---前端组件之表格组件的封装与使用(Vue3)

业务背景

        在我们接触的项目中,PC端的项目中基本上百分之60或以上,都会用到表格,我们最常用的 就是element-plus 组件库,相信大家都对el-table 都比较熟悉了,但是在许许多多大同小异的界面中,每次都要写很多重复的代码,不仅容易出错,而且效率不高。况且很多项目大都是时间紧、任务重、有时候需求变化频繁,一改就是好几个界面。

   那么,我们能不能把这些重复的,没有技术含量的工作,抽离组件,通过一个简单的json 配置就能实现这些功能,岂不是就能早点下班了。

组件封装的原则

  1. 首先梳理组件的功能,明确那些功能是要放进组件内的,梳理出功能大纲;
  2. 功能大纲出来后,需要考虑每个功能模块的使用方法,怎样封装,才能让使用者,通过简单的配置,就可以使用,甚至可以让不会代码的人都能使用;
  3. 二次封装,原有的事件和属性,需要全部继承(v-bind="$attrs" 和  v-on="$listeners");
  4. 除了定制性的功能,还需要有预留自定义的扩展功能( slot 和 modelValue);
  5. 命名需要做到见文知意;
  6. 封装的组件代码内部一定要遵循功能单一、可扩展等原则

需要掌握的技术

vue: slot插槽的使用、defineProps、defineEmits、defineExpose、wacth、computed;

element-plus: el-table的使用、v-bind="$attrs" 和  v-on="$listeners"、el-pagination、el-upload、el-form等,这里看封装的组件业务复杂程度,不再展开;

以封装表格组件为案例

第一步: 梳理组件的功能大纲

​​​​​​​

 

相关文章:

前端内部技术分享---前端组件之表格组件的封装与使用(Vue3)

业务背景 在我们接触的项目中,PC端的项目中基本上百分之60或以上,都会用到表格,我们最常用的 就是element-plus 组件库,相信大家都对el-table 都比较熟悉了,但是在许许多多大同小异的界面中,每次都要写很多…...

【一】Mac 本地部署大模型

盘古开天辟地开始 # 安装brew/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"(echo; echo eval "$(/opt/homebrew/bin/brew shellenv)") >> /Users/wangxin52/.zprofileeval "$(/opt/homeb…...

vue实现相机拍摄,可录视频、拍照片、前置后置切换(简单小demo)

内容比较简单&#xff0c;不做过多赘述&#xff0c;只做分享&#xff0c;测试demo&#xff0c;功能有些缺陷&#xff0c;希望路过的大佬多多指正 /(*/ω&#xff3c;*) <script setup> import { showToast, showSuccessToast, showFailToast, showLoadingToast } from …...

【项目】牛马点评 问题汇总

如果一个人换很多个不同电话号发验证码会怎样 项目里没实现&#xff0c;如果让我做的话&#xff0c;我会获得用户的ip地址&#xff0c;然后存到redis里&#xff0c;设置个ttl比如1分钟&#xff0c;每次请求过来后就先看看redis里有没有这个ip&#xff0c;有的话就不发验证码。…...

使用 Docker Compose 部署邮件服务器

使用 Docker Compose 部署邮件服务器 很多时候为了方便&#xff0c; 我们都直接使用第三方邮箱进行收发邮件。 但第三方邮箱有些要求定期修改密码&#xff0c;有些限制发邮箱的次数&#xff0c; 对于一些个人和企业来说&#xff0c; 有自己的域名和服务器为什么不自己搭建一个邮…...

FastAPI+React全栈开发21 探索React路由器和其他好东西

Chapter04 Setting Up a React Workflow 21 Exploring React Router and other goodies FastAPIReact全栈开发21 探索React路由器和其他好东西 So far, we have only created a couple of single-page apps that are really single pages, we haven’t touched some advance…...

Java pdfbox 给 PDF 添加文字和图片水印 并旋转45度

POM <dependency><groupId>org.apache.pdfbox</groupId><artifactId>pdfbox</artifactId><version>2.0.27</version> </dependency> 代码&#xff1a; import org.apache.pdfbox.pdmodel.PDDocument; import org.apache.pdf…...

微信小程序中路由跳转方式

文章目录 wx.switchTab(Object)wx.reLaunch(Object)wx.redirectTo(Object)wx.navigateTo(Object)wx.navigateBack(Object) 常见的微信小程序页面跳转方式有如下&#xff1a; wx.switchTab(Object)&#xff1a;跳转到 tabBar 页面&#xff0c;并关闭其他所有非 tabBar 页面&…...

Flutter应用发布前的关键iOS设备测试策略

本文探讨了使用Flutter开发的iOS应用能否上架&#xff0c;以及上架的具体流程。苹果提供了App Store作为正式上架渠道&#xff0c;同时也有TestFlight供开发者进行内测。合规并通过审核后&#xff0c;Flutter应用可以顺利上架。但上架过程可能存在一些挑战&#xff0c;因此可能…...

深入理解Linux环境配置文件:.bashrc、.bash_profile和.profile

在Linux世界中&#xff0c;理解各种shell配置文件如.bashrc、.bash_profile和.profile的作用和区别对于有效地管理和定制你的命令行环境至关重要。许多用户经常对这些文件的功能和使用场景感到困惑。本文旨在详细解释这些配置文件的差异、作用以及它们的正确使用方法。 .bashr…...

数据库设计规范(三大范式)

1、第一范式*&#xff08;确保每列保持原子性&#xff09; 第一范式是最基本的范式。如果数据库表中的所有字段值都是不可分解的原子值&#xff0c;就说明该数据库满足第一范式。 第一范式的合理遵循需要根据系统给的实际需求来确定。比如某些数据库系统中需要用到“地址”这…...

图论模板详解

目录 Floyd算法 例题&#xff1a;蓝桥公园 Dijkstra算法 例题&#xff1a;蓝桥王国 SPFA算法 例题&#xff1a;随机数据下的最短路问题 总结 最小生成树MST Prim算法 Kruskal算法 例题&#xff1a;聪明的猴子 Floyd算法 最简单的最短路径算法&#xff0c;使用邻接…...

ArcGIS Pro打不开Excel?Microsoft驱动程序安装不上?

刚用ArcGIS pro的朋友们可能经常在打开xls或者xlsx文件的时候都会提示&#xff0c;未安装所需的Microsoft驱动程序。 怎么办呢&#xff1f;当然&#xff0c;按照提示装一下驱动就会好吗&#xff1f;有什么状况会出现&#xff1f;有什么临时替代方案呢&#xff1f; 全文目录&a…...

简单了解裸眼3D呈现技术

裸眼3D呈现是一种不需要佩戴任何特殊设备&#xff08;如3D眼镜或头盔&#xff09;即可观看到3D效果的技术。这种技术近年来得到了快速发展&#xff0c;为观众带来了更加沉浸式的视觉体验。 实现裸眼3D呈现的关键步骤包括&#xff1a; 创建立体图像源&#xff1a;首先需要有一…...

单元测试——Junit (断言、常用注解)

单元测试 Junit单元测试框架 使用 断言测试 使用Assert.assertEquals(message, 预期值, 实际值); 这段代码是用于在测试中验证某个方法的返回值是否符合预期。其中&#xff0c;"方法内部有bug"是用于在断言失败时显示的提示信息。4是预期的返回值&#xff0c;index…...

【蓝桥杯每日一题】4.2 全球变暖

原题链接&#xff1a;1233. 全球变暖 - AcWing题库 由题意可知&#xff1a; 需要找到淹没的岛屿的数量淹没的岛屿所具备的条件&#xff1a;咩有“高地”&#xff0c;也就是说岛屿&#xff08;连通块&#xff09;中的所有元素的 4 4 4-邻域中均含有’ . ’ 思路1&#xff1a;…...

ffmpeg点对点音视频udp协议传输

参考&#xff1a;https://zhuanlan.zhihu.com/p/636152437?utm_id0 ffmpeg查看可用设备&#xff1a; ffmpeg -list_devices true -f dshow -i dummy1、音频 局域网内两台设备间 设备1-音频&#xff1a; ffmpeg -f dshow -i audio"麦克风阵列 (适用于数字麦克风的英特…...

ensp华为AC+AP上线配置

AR1配置&#xff1a; <Huawei>system-view # 进入系统视图<Huawei>sysname R1 # 设备重命名[R1]dhcp enable # 开启DHCP功能[R1]interface GigabitEthernet0/0/0 # 进入接口 [R1-GigabitEthernet0/0/0]ip address 192.168.0.1 23 # 配置接口地址 [R1-GigabitE…...

JAVA基础02-Java语言基础以及编译准备工作

什么是JAVA语言 Java是一门面向对象的编程语言&#xff0c;不仅吸收了C语言的各种优点&#xff0c;还摒弃了C里难以理解的多继承、指针等概念&#xff0c;因此Java语言具有功能强大和简单易用的两个特征。 &#xff08;可以编写桌面应用程序、Web应用程序、分布式系统和嵌入式…...

Photoshop 2024 Mac/win---图像处理的新纪元,解锁无限创意

Photoshop 2024是一款功能强大的图像处理软件&#xff0c;以其卓越的性能和广泛的应用领域&#xff0c;赢得了设计师、摄影师、图形艺术家等各类创意工作者的青睐。它提供了丰富的绘画和编辑工具&#xff0c;让用户能够轻松进行图片编辑、合成、校色、抠图等操作&#xff0c;实…...

未来机器人的大脑:如何用神经网络模拟器实现更智能的决策?

编辑&#xff1a;陈萍萍的公主一点人工一点智能 未来机器人的大脑&#xff1a;如何用神经网络模拟器实现更智能的决策&#xff1f;RWM通过双自回归机制有效解决了复合误差、部分可观测性和随机动力学等关键挑战&#xff0c;在不依赖领域特定归纳偏见的条件下实现了卓越的预测准…...

Prompt Tuning、P-Tuning、Prefix Tuning的区别

一、Prompt Tuning、P-Tuning、Prefix Tuning的区别 1. Prompt Tuning(提示调优) 核心思想:固定预训练模型参数,仅学习额外的连续提示向量(通常是嵌入层的一部分)。实现方式:在输入文本前添加可训练的连续向量(软提示),模型只更新这些提示参数。优势:参数量少(仅提…...

【Oracle APEX开发小技巧12】

有如下需求&#xff1a; 有一个问题反馈页面&#xff0c;要实现在apex页面展示能直观看到反馈时间超过7天未处理的数据&#xff0c;方便管理员及时处理反馈。 我的方法&#xff1a;直接将逻辑写在SQL中&#xff0c;这样可以直接在页面展示 完整代码&#xff1a; SELECTSF.FE…...

Frozen-Flask :将 Flask 应用“冻结”为静态文件

Frozen-Flask 是一个用于将 Flask 应用“冻结”为静态文件的 Python 扩展。它的核心用途是&#xff1a;将一个 Flask Web 应用生成成纯静态 HTML 文件&#xff0c;从而可以部署到静态网站托管服务上&#xff0c;如 GitHub Pages、Netlify 或任何支持静态文件的网站服务器。 &am…...

ServerTrust 并非唯一

NSURLAuthenticationMethodServerTrust 只是 authenticationMethod 的冰山一角 要理解 NSURLAuthenticationMethodServerTrust, 首先要明白它只是 authenticationMethod 的选项之一, 并非唯一 1 先厘清概念 点说明authenticationMethodURLAuthenticationChallenge.protectionS…...

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

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

Mysql中select查询语句的执行过程

目录 1、介绍 1.1、组件介绍 1.2、Sql执行顺序 2、执行流程 2.1. 连接与认证 2.2. 查询缓存 2.3. 语法解析&#xff08;Parser&#xff09; 2.4、执行sql 1. 预处理&#xff08;Preprocessor&#xff09; 2. 查询优化器&#xff08;Optimizer&#xff09; 3. 执行器…...

BLEU评分:机器翻译质量评估的黄金标准

BLEU评分&#xff1a;机器翻译质量评估的黄金标准 1. 引言 在自然语言处理(NLP)领域&#xff0c;衡量一个机器翻译模型的性能至关重要。BLEU (Bilingual Evaluation Understudy) 作为一种自动化评估指标&#xff0c;自2002年由IBM的Kishore Papineni等人提出以来&#xff0c;…...

TJCTF 2025

还以为是天津的。这个比较容易&#xff0c;虽然绕了点弯&#xff0c;可还是把CP AK了&#xff0c;不过我会的别人也会&#xff0c;还是没啥名次。记录一下吧。 Crypto bacon-bits with open(flag.txt) as f: flag f.read().strip() with open(text.txt) as t: text t.read…...

【免费数据】2005-2019年我国272个地级市的旅游竞争力多指标数据(33个指标)

旅游业是一个城市的重要产业构成。旅游竞争力是一个城市竞争力的重要构成部分。一个城市的旅游竞争力反映了其在旅游市场竞争中的比较优势。 今日我们分享的是2005-2019年我国272个地级市的旅游竞争力多指标数据&#xff01;该数据集源自2025年4月发表于《地理学报》的论文成果…...