项目中简单封装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/string	true/left/right	true
menu	是否有操作栏	boolean	-	false
menuWidth	操作栏宽度	number	-	280
menuLabel	操作栏标题	string	-	操作
menuFixed	操作栏列冻结列 ，true 表示固定在左侧	boolean/string	true/left/right	right
menuAlign	操作栏按钮的对齐方式	string	left/center/right	center
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	组件布局，子组件名用逗号分隔	string	sizes, prev, pager, next, jumper, ->, total, slot	-
pageSizes	每页显示个数选择器的选项设置	array	-	[10, 20, 30, 40]
background	是否为分页按钮添加背景色	boolean	-	true

Column - 共用属性

参数	说明	类型	可选值	默认值
label	列标题	string	-	-
prop	列标题的内容属性名称	string	-	-
width	对应列的宽度	string	-	-
align	对齐方式	string	left/center/right	left
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