vue 封装Form 表单组件

基于element-plus封装一个表单组件

在components目录下新建一个Form.vue

<template>
    <section class="form-wrap">
        <el-form 
	        :model="formDatas" 
	        label-width="100" 
	        label-position="right" ref="form" 
	        :rules="rules">
            <el-row :gutter="8">
                <template v-for="item in propList" :key="item.id">
                    <el-col :span="8">
                        <el-form-item 
	                        v-if="item.show" 
	                        :key="item.id" 
	                        :prop="item.prop" 
	                        :label="item.label">
                            // input
                            <el-input 
	                             v-else="item.type == 'input'"
	                             v-model="formDatas[item.prop]"
	                            :placeholder="item.placeholder" 
	                            :disabled="item.disabled" 
	                            :style="{ width: item.width }"
	                            clearable>
	                         </el-input>
                            // select
                            <el-select 
                            	v-if="item.type == 'select'"
                                v-model="formDatas[item.prop]"
                                :placeholder="item.placeholder" 
                                :style="{ width: item.width }" 
                                clearable>
                                <el-option 
	                                v-for="option in item.options" 
	                                :label="option.label" 
	                                :value="option.value"
                                    :key="option.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </template>
            </el-row>
            // 插槽
            <slot></slot>
        </el-form>
    </section>
</template>

<script setup>
import { ref, reactive, toRefs, inject, onMounted } from 'vue'
import { ElMessage } from 'element-plus'

const form = ref(null)

const emits = defineEmits(['close'])

const data = reactive({
    formDatas: {}
})

// 因为是在Dialog组件中的 form 所以通过依赖注入的方式通信
// 解构注入的属性
const { title, formData, addData } = inject('formObj')

onMounted(() => {
    const dataForm = formData
    formDatas.value = dataForm
})

// 定义表单属性校验
const rules = reactive({
    name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
    username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
    phone: [{ required: true, message: '请输入联系电话', trigger: 'blur' }]
})

const { formDatas } = toRefs(data)
// 表单验证
const formValidate = async () => {
    await form.value.validate((valid, fields) => {
        if (valid) {
            const editFormData = formDatas.value
            addData(editFormData)
            if (title === '编辑') {
                ElMessage({
                    message: '修改成功',
                    type: 'success',
                })
            } else {
                ElMessage({
                    message: '新增成功',
                    type: 'success',
                })
            }
            emits('close')
        }
    })
}

function resetForm() {
    form.value.resetFields()
}

defineProps({
    propList: Array,
    formDatas: Object
})

defineExpose({
    formValidate,
    resetForm
})
</script>

<style lang="scss" scoped>
.form-wrap {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    padding: 5px;
}
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123