基于 Vue3 + Element-plus 表单 Form 组件二次封装

项目信息

项目名称：vue3-xmw-form
预览地址：点击预览
Github：vue3-element-form

使用方法

• 根目录下执行 npm i vue3-xmw-form 命令

  POWERSHELL 代码:

  npm i vue3-xmw-form

• 全局挂载组件

  JAVASCRIPT 代码:

  import { createApp } from 'vue'
  import App from './App.vue'
  import Xmwform from 'vue3-xmw-form'
  
  createApp(App).use(Xmwform).mount('#app')

• 在页面上使用

  HTML 代码:

  <!-- 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 所有属性

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