項目信息

• 項目名稱：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 所有屬性

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 懶加載,帶有空封裝
• 需要的伙伴可以在此基礎拓展

此項目不再維護，如需學習或者使用，可以把源碼拷貝到本地進行拓展。