项目中简单封装vue3+element-plus表单

前言

  对于前端来说,在项目中,怎么简单怎么来,所以大佬们封装了一系列的插件与组件,avue就是一个很好的例子,但avue毕竟是别人公司封装的组件框架,自己不能改动加功能逻辑啊,头疼的很,所以我自己初步模仿avue编写代码的方式搭了一个围绕表格的框架组件。
  封装后的表单组件可以便捷地在项目中复用和扩展;实现动态渲染表单组件,包括输入框、选择器、开关、日期等;

在这里插入图片描述

自定义表单框架【vep-crud

  由于框架整体比较大,现在处于搭建初期,只粗略编写常用的功能及属性;其它后期持续完善
  vep:vite+ts项目:vue3 + element-plus

crud属性文档

  组件具体属性,见element-plus文档,我只编写项目中的一小部分

crud
参数说明类型可选值默认值
data显示的数据array--
option表单配置项object--
before-open打开前的回调,用于区别弹窗的异处或发送详情请求获取数据function-(type, row)=>{}
v-model:page分页变量object--
option
参数说明类型可选值默认值
height表格的高度,默认为自动高度string-100%
size表格大小string‘’ 、‘large’ 、‘default’ 、‘small’-
border是否带有纵向边框boolean-false
stripe是否有斑马纹boolean-false
index是否有序号boolean-false
indexWidth序号列宽度number-60
indexFixed序号列是否冻结列 ,true 表示固定在左侧boolean/stringtrue/left/righttrue
menu是否有操作栏boolean-false
menuWidth操作栏宽度number-280
menuLabel操作栏标题string-操作
menuFixed操作栏列冻结列 ,true 表示固定在左侧boolean/stringtrue/left/rightright
menuAlign操作栏按钮的对齐方式stringleft/center/rightcenter
selection是否有选择框boolean-false
emptyText空数据时显示文案string-暂无数据
defaultExpandAll是否默认展开全部boolean-false
highlightCurrentRow是否要高亮当前行boolean-false
rowKey行数据的 Key,用来优化 Table 的渲染string-id
reserveSelection在数据更新之后保留之前选中的数据(需指定 rowKey)boolean-false
flexible是否自适应boolean-true
search是否显示搜索boolean-false
drawerTitle弹窗标题后缀(如创建用户弹窗,drawerTitle:“用户”)string--
column表单列配置array--
page
参数说明类型可选值默认值
current显示的数据number-1
size每页显示条目个数number-10
total总条目数number-0
layout组件布局,子组件名用逗号分隔stringsizes, prev, pager, next, jumper, ->, total, slot-
pageSizes每页显示个数选择器的选项设置array-[10, 20, 30, 40]
background是否为分页按钮添加背景色boolean-true
Column - 共用属性
参数说明类型可选值默认值
label列标题string--
prop列标题的内容属性名称string--
width对应列的宽度string--
align对齐方式stringleft/center/rightleft
hide是否显示在表格中boolean-true
slot该列表格显示内容是否可自定义boolean-true
search该列是否可搜索boolean-true
formSlot该列对应的弹窗表单是否可自定义boolean-true
rules该列对应的弹窗表单校验规则array--
type对应列的类型string--
display对应列在所有弹窗表单是否显示boolean-true
addPlay对应列在新增弹窗表单是否显示boolean-false
editPlay对应列在编辑弹窗表单是否显示boolean-false
viewPlay对应列在查看弹窗表单是否显示boolean-false
span对应列在弹窗表单宽度number-24
disabled对应列弹窗表单是否是否禁用boolean-false
size对应列表单输入框尺寸string‘large’ 、‘default’ 、‘small’default
placeholder对应列输入框占位文本string--
clearable对应列输入框是否可清空boolean-false
Column - input
参数说明类型可选值默认值
maxlength该列对应的弹窗表单限制长度number--
minlength该列对应的弹窗表单限制长度number--
showWordLimit该列对应的弹窗表单是否显示统计字数,boolean-fasle
showPassword对应列是否显示切换密码图标,仅对type=“password”生效boolean-false
rows对应列文本域高度number--
Column - number
参数说明类型可选值默认值
controls对应列是否使用控制按钮,仅对type=“number”生效,下同boolean-true
min对应列设置计数器允许的最小值number--Infinity
max对应列设置计数器允许的最大值number-Infinity
precision对应列计数器精度number--
position对应列控制按钮位置string‘’/right-
step对应列计数器步长number-1
Column - selete/ridao/tree
参数说明类型可选值默认值
filterable对应列选择器是否可过滤boolean-false
value对应列在弹窗表单默认值string--
dicData对应列的字典数据array--
dicUrl对应列的字典请求string--
props对应列的属性配置object-{ label:“label”,value:“value”}
Column - date
参数说明类型可选值默认值
disabledDate对应列是否禁用某天function--
format对应列显示值时间格式string--
valueFormat对应列真实值的时间格式string--
startPlaceholder对应列日期/时间范围开始占位符string--
endPlaceholder对应列日期/时间范围结束占位符string-
defaultTime对应列范围选择时选中日期所使用的当日内具体时刻string[]数组,长度为 2,每项值为字符串,形如12:00:00,第一项指定开始日期的时刻,第二项指定结束日期的时刻,不指定会使用时刻 00:00:00-
defaultValue选择器打开时默认显示的时间Date--
editable选择器是否可编辑boolean-false

Events

事件名称说明参数
size-change改变每页大小(size)=> {}
current-change改变当前页数(current)=> {}
selection-change当选择项发生变化时会触发该事件(selection)=> {}
search-change点击搜索后触发该事件(param)=> {}
search-reset清空搜索回调方法-
before-open打开前的回调(type,form)=> {}
row-save新增数据后点击确定触发该事件(form)=> {}
row-update更新数据后确定触发该事件(form)=> {}
on-load表格初始化获取数据-

Methods

事件名称说明参数
rowAdd打开表单新增窗口-
rowEdit打开表单编辑窗口(row)=> {}
rowView打开表单编辑窗口(row)=> {}
saveOrUpdate新增或编辑请求方式(api,row)=> {}
toggleRowSelection改变表格选框状态(row,status)=> {}
clearSelection清空用户的选择-

案例配置:(万物皆可自定义)

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
封装组件中:
在这里插入图片描述

组件持续更新中…
🍭相关项目:https://gitee.com/csg4188/vvtep.git

  • 11
    点赞
  • 29
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
### 回答1: Vue3、Element Plus、Axios封装是一种前端开发的技术组合。Vue3是一个流行的JavaScript框架,用于构建用户界面。它提供了一套响应式的数据绑定和组件系统,使开发者可以轻松构建动态和交互式的Web应用程序。 Element Plus是Vue3的一套UI组件库,它基于Element UI进行了优化和扩展。Element Plus提供了丰富的组件,例如按钮、表单、表格和对话框等,这些组件帮助开发者快速搭建美观且易于使用的用户界面。 Axios是一个常用的HTTP库,用于在浏览器进行网络请求。它提供了简洁且功能强大的API,易于使用和配置。Axios支持异步请求、拦截器、请求取消等功能,使开发者能够更加高效地处理网络请求。 封装Vue3、Element Plus和Axios的主要目的是提高开发效率和代码的可维护性。通过封装,可以将常用的功能和逻辑抽象出来,以减少重复代码量,并提供易于复用的代码片段。同时,封装还可以提供一致性和可扩展性,使开发团队能够更好地合作和协作。 在封装,可以根据具体的需求和项目特点,设计合适的结构和接口。例如,可以将API请求封装成统一的函数或类,以提供统一的调用方式和错误处理。还可以封装一些通用的组件和样式,以提高开发效率和用户体验。 总之,Vue3、Element Plus和Axios封装是一种有效的前端开发方法,它能够提高开发效率、保证代码质量,并帮助开发者构建出功能强大和用户友好的Web应用程序。 ### 回答2: Vue3是Vue.js的下一个主要版本,它带来了许多令人兴奋的新特性和改进。Vue3的主要目标是提供更好的性能、更好的开发体验以及更好的扩展性。它采用了一种新的底层渲染机制,称为“响应式”,使其比Vue2更快、更高效。 Element Plus是一个基于Vue3的UI库,它是Element UI的升级版本。Element Plus提供了一套美观、易于使用的组件,可以帮助我们快速构建现代化的网页和应用程序。它具有丰富的组件库,包括按钮、表单、菜单、对话框等,可以满足各种需求。 Axios是一个基于Promise的HTTP库,用于发送异步请求。它可以在浏览器和Node.js使用,并且具有简单易用的API。Axios支持各种请求方法,如GET、POST等,并且可以发送请求、处理响应、设置请求头等。它还支持拦截器,可以在发送请求和处理响应之前对请求进行处理,例如添加身份验证信息、处理错误等。 封装Vue3、Element Plus和Axios可以提高我们的开发效率和代码重用性。我们可以根据自己的需求,将常用的组件和方法封装成可复用的模块,以便在不同的项目使用。对于Vue3和Element Plus,我们可以封装一些通用的页面布局和组件,以及常用的数据操作和状态管理逻辑。对于Axios,我们可以封装一些通用的API请求方法,并配置请求拦截器和响应拦截器,以便在请求添加身份验证信息、处理错误等。 总之,封装Vue3、Element Plus和Axios可以提高代码的可维护性和可重用性,使我们的开发更加高效和便捷。 ### 回答3: Vue3是一款流行的JavaScript框架,它采用了响应式数据绑定和组件化的开发模式,使得前端开发变得更加简单、高效。Vue3相比于之前的版本,有着更好的性能和更好的开发者体验。 Element Plus是一套基于Vue3开发的UI组件库,它提供了丰富的组件,包括按钮、表单、弹窗等等,开发者可以通过简单的配置和使用,快速构建出美观、交互丰富的前端界面。 Axios是一款基于Promise的HTTP库,可以用于浏览器和Node.js发送HTTP请求,它支持各种请求方法,如GET、POST等,还有拦截器、请求取消等功能,使得前后端数据交互更加方便和可控。 在封装Vue3Element Plus和Axios时,可以利用Vue3的组合式API进行封装。首先,可以创建一个封装Axios实例的文件,设置基础的URL、拦截器等配置。然后,使用Vue3的provide和inject特性,在全局范围内注入该封装的Axios实例。 接下来,在使用Axios发送请求的时候,可以通过创建自定义的hooks,封装常用的请求方法,例如get、post等,将方法放在适当的组件,并在需要的时候调用这些hooks,以完成数据的请求。 对于Element Plus组件封装,可以创建一个全局注册的文件,在该文件按需导入所需的组件,并进行全局注册,使得所有的组件都可以使用。也可以根据项目的需要,自定义一些常用的组件,并在适当的地方进行封装和使用。 通过上述的封装,能够在Vue3项目更加方便地使用Element Plus和Axios,并且实现代码的复用和维护的便利性。同时,这些封装也为项目的开发提供了更高的效率和更好的可维护性。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值