vue3-element-table

基于 Vue3 + Element-plus 封装的 Form 组件，支持所有 Element-plus Form 组件配置项 文档

Form 属性

除此之外支持所有 el-form 所有 属性

参数说明类型默认值
formData表单数据,双向绑定(字段需与 prop 属性一样)Object-
formColumns表单配置项,详情见下方 Column 属性Array-
formRules表单规则验证,校验规则请参考 el-formObject-

Form 方法

表单组件已给 el-form 绑定 ref 并用 defineExpose 暴露出来，我们只需要在引入组件中绑定ref,即可调用 el-form 的方法

1
<XmwForm :formData="formData" :formColumns="formColumns" :formRules="formRules" ref="baseForm"></XmwForm>

调用方式

1
2
const baseForm = ref<HTMLElement | null>(null)
baseForm.value.formRef.resetFields()

具体写法可参考 Demo

Column 配置

参数说明类型默认值
xType表单类型,详情见下方 xType 属性String-
slotName插槽,开启 slot 支持(开启这个属性,其它属性无效)Booleanfalse
labelel-form-item label 属性String-
propel-form-item prop 属性String-
span栅格占据的列数Number-
offset栅格左侧的间隔格数Number-
formItemOpts支持 el-form-item 的所有属性Object-
$event支持 xType 表单类型的所有事件(事件名需与 Element 组件事件名一样)Function-

xType 表单类型

参数类型说明
Input输入框支持 el-input 的所有属性和事件
Autocomplete自动补全输入框支持 el-autocomplete 的所有属性和事件
Select下拉框支持 el-select 的所有属性和事件
SelectV2虚拟列表选择器支持 el-select-v2 的所有属性和事件
DatePicker日期时间选择器支持 el-date-picker 的所有属性和事件
TimePicker时间选择器支持 el-time-picker 的所有属性和事件
TimeSelect时间选择支持 el-time-select 的所有属性和事件
InputNumber数字输入框支持 el-input-number 的所有属性和事件
Radio单选框支持 el-radio 的所有属性和事件
Checkbox多选框支持 el-checkbox 的所有属性和事件
SwitchSwitch 开关支持 el-switch 的所有属性和事件
SliderSlider 滑块支持 el-slider 的所有属性和事件
RateRate 评分支持 el-rate 的所有属性和事件
Transfer穿梭框支持 el-transfer 的所有属性和事件
Cascader级联框支持 el-cascader 的所有属性和事件
ColorPicker颜色选择器支持 el-color-picker 的所有属性和事件
Tree树形控件支持 el-tree 的所有属性和事件
TreeSelect树形选择支持 el-tree-select 的所有属性和事件
TreeV2虚拟化树形控件支持 el-tree-v2 的所有属性和事件

存在的问题

  1. 还没找到办法支持所有 xType 的所有方法,如果需要用到组件的方法，目前只能用 slotName 引入 Element 原生组件,有想法的伙伴可以交流一下
  2. 由于获取不到 el-tree 的方法,Tree 和 TreeV2 组件目前还不能正确回显和数据绑定
  3. 目前已支持大部分的表单类型,还缺少一个 LasySelect 懒加载,带有空封装
  4. 需要的伙伴可以在此基础拓展

问题解决中。。。

在线预览地址：vue3-element-form

码云：https://gitee.com/Cyan-Xmw/vue3-element-form