vue3中使用render函数以及组合式写法实现一个配置化生成的表单组件

表单组件代码

import { h, computed, ref } from 'vue'
import type { PropType } from 'vue'
import { Form, Input, Radio, FormItem, Checkbox } from '@arco-design/web-vue'

//去除定义类型中 指定的key
type RestrictKey<T, K extends keyof any> = {
  [P in keyof T]: P extends K ? never : T[P];
};

//FormPropsType 类型中的属性与官网form 组件的属性保持一致 但不用再声明model属性
export type FormPropsType =RestrictKey<{
  model?: string; 
  items: {
    [key: string]: {
        type: 'radio' | 'input' | 'checkbox' | 'slot'
        //config 类型中的属性与官网formItem 组件的属性保持一致 但不用再声明field属性
        config: RestrictKey<{
          [key: string]: any;
          field?: string; 
      },'field'> //去除field属性 不允许传model属性
        slotFormConfig: {
            modelValue: any
            [key: string]: any
        }
    }
}
  [key: string]: any
},'model'> //去除model属性 不允许传model属性

export default {
    components: {
        Form,
        Input,
        Radio,
        FormItem,
        Checkbox
    },
    props: {
        config: {
            type: Object as PropType<FormPropsType>
        }
    },
    setup(props: FormPropsType, { expose, emit, slots }: any) {
        const FormRef = ref()

        //渲染表单项组件
        const formItemComponent = computed(() => {
            return Array.from(Object.keys(props.config.items)).map(formItemName => {
                const formItemConfig = props.config.items[formItemName]
                formItemConfig.slotFormConfig['onUpdate:modelValue'] = (e:any) => {
                    // emit('onUpdate:modelValue', e)
                    formItemConfig.slotFormConfig.modelValue = e
                }
                formItemConfig.config['field'] = formItemName
                let slotComp
                switch (formItemConfig.type) {
                    case 'slot':
                        slotComp = h(
                            'div',
                            {
                              style:{
                                width:'100%',
                                height:'100%'
                              }
                            },
                            slots[formItemName](props.config.items[formItemName].slotFormConfig)
                        )
                        break
                    case 'input':
                        slotComp = h(Input, props.config.items[formItemName].slotFormConfig)
                        break
                    case 'radio':
                        slotComp = h(Radio, props.config.items[formItemName].slotFormConfig)
                        break
                    case 'checkbox':
                        slotComp = h(Checkbox, props.config.items[formItemName].slotFormConfig)
                        break
                }
                const comp = h(FormItem, formItemConfig.config, slotComp)
                return comp
            })
        })

        //渲染表单组件
        const formComponent = computed(() => {
            return h(
                Form,
                {
                    ...props.config,
                    model: Object.keys(props.config.items)
                        .map(formItemName => {
                            return [
                                formItemName,
                                props.config.items[formItemName].slotFormConfig.modelValue
                            ]
                        })
                        .reduce((acc: any, [key, value]) => {
                            acc[key] = value
                            return acc
                        }, {}),
                    ref: FormRef
                },
                formItemComponent.value
            )
        })

        expose({
            FormRef
        })
        return () => h('div', {}, formComponent.value)
    }
}

示例代码

<script setup lang="ts">
import { ref } from 'vue'
import XForm from '@/components/common/x-form/index.ts'
import type { FormPropsType } from '@/components/common/x-form/index.ts'
import { defineEmits } from 'vue'
let emit = defineEmits(['update:selectedKeys'])






const xFormRef=ref()
const formConfig = ref<FormPropsType>({
    items: {
        name: {
            type: 'slot',
            config: {
                label: '姓名',
                rules: [{ required: true, message: 'Name is required' }],
                style:{
                  width:'300px'
                }
            },
            slotFormConfig: {
                modelValue: ''
            }
        }
    }
})

function verifyForm() {
  xFormRef.value.FormRef.validate()

}
</script>

<template>
    <XForm :config="formConfig" ref="xFormRef">
        <template #name="scoped">
            <a-input v-model="scoped.modelValue" />
        </template>
    </XForm>
    <a-button type="primary" @click="verifyForm">校验</a-button>

</template>

<style scoped></style>