项目信息
- 项目名称：
vue3-xmw-form - 预览地址：点击预览
- Github：vue3-element-form
使用方法
- 根目录下执行
npm i vue3-xmw-form命令
npm i vue3-xmw-form
- 全局挂载组件
import { createApp } from 'vue'
import App from './App.vue'
import Xmwform from 'vue3-xmw-form'
createApp(App).use(Xmwform).mount('#app')
- 在页面上使用
<!-- template -->
<vue3-xmw-form
:formData="formData"
:formColumns="formColumns"
:formRules="formRules"
label-width="120px"
ref="baseForm"
>
<!-- 大标题 -->
<template v-slot:baseTitle>
<h1>基于 Element-plus 封装的表单组件</h1>
</template>
<!-- 操作按钮 -->
<template v-slot:Actions>
<div style="text-align: center">
<el-button type="primary" @click="onSubmit(baseForm)"
>提交</el-button
>
<el-button @click="handlerReset">重置</el-button>
</div>
</template>
</vue3-xmw-form>
Form 属性
除此之外支持所有 el-form 所有属性
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| formData | 表单数据,双向绑定(字段需与 prop 属性一样) | Object | - |
| formColumns | 表单配置项,详情见下方 Column 属性 | Array | - |
| formRules | 表单规则验证,校验规则请参考 rules | Object | - |
Form 方法
表单组件已给 el-form 绑定 ref 并用 defineExpose 暴露出来，我们只需要在引入组件中绑定 ref,即可调用 el-form 的方法
<XmwForm :formData="formData" :formColumns="formColumns" :formRules="formRules" ref="baseForm"></XmwForm>
调用方式
const baseForm = ref<HTMLElement | null>(null)
baseForm.value.formRef.resetFields()
具体写法可参考 Demo
Column 配置
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| xType | 表单类型,详情见下方 xType 属性 | String | - |
| slotName | 插槽,开启 slot 支持(开启这个属性,其它属性无效) | Boolean | false |
| label | el-form-item label 属性 | String | - |
| prop | el-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 的所有属性和事件 |
| Switch | Switch 开关 | 支持 el-switch 的所有属性和事件 |
| Slider | Slider 滑块 | 支持 el-slider 的所有属性和事件 |
| Rate | Rate 评分 | 支持 el-rate 的所有属性和事件 |
| Transfer | 穿梭框 | 支持 el-transfer 的所有属性和事件 |
| Cascader | 级联框 | 支持 el-cascader 的所有属性和事件 |
| ColorPicker | 颜色选择器 | 支持 el-color-picker 的所有属性和事件 |
| Tree | 树形控件 | 支持 el-tree 的所有属性和事件 |
| TreeSelect | 树形选择 | 支持 el-tree-select 的所有属性和事件 |
| TreeV2 | 虚拟化树形控件 | 支持 el-tree-v2 的所有属性和事件 |
存在的问题
- 还没找到办法支持所有
xType的所有方法,如果需要用到组件的方法，目前只能用slotName引入Element原生组件,有想法的伙伴可以交流一下 - 由于获取不到
el-tree的方法,Tree和TreeV2组件目前还不能正确回显和数据绑定 - 目前已支持大部分的表单类型,还缺少一个
LasySelect懒加载,带有空封装 - 需要的伙伴可以在此基础拓展
此项目不再维护，如需学习或者使用，可以把源码拷贝到本地进行拓展。
