定义组件map集合 根据map集合key值获取 进行组件展示

1。定义组件map集合

import {Input,Select,Radio,Checkbox,AutoComplete,Cascader,InputNumber,Switch,TreeSelect,Slider,Rate
} from 'ant-design-vue';
import {ref} from 'vue'
export const componentMap =ref(new Map<string, any>());componentMap.value.set('Input', Input);
componentMap.value.set('InputGroup', Input.Group);
componentMap.value.set('InputPassword', Input.Password);
componentMap.value.set('InputSearch', Input.Search);
componentMap.value.set('InputTextArea', Input.TextArea);
componentMap.value.set('InputNumber', InputNumber);
componentMap.value.set('AutoComplete', AutoComplete);componentMap.value.set('Select', Select);
componentMap.value.set('TreeSelect', TreeSelect);
componentMap.value.set('Switch', Switch);
componentMap.value.set('RadioGroup', Radio.Group);
componentMap.value.set('Checkbox', Checkbox);
componentMap.value.set('CheckboxGroup', Checkbox.Group);
componentMap.value.set('Cascader', Cascader);
componentMap.value.set('Slider', Slider);
componentMap.value.set('Rate', Rate);

2创建tsx 文件 封装通用组件

import { defineComponent, defineAsyncComponent, h } from 'vue';
import { componentMap } from './dataClassificationModal.data';
export default defineComponent({name: 'formItem',props: {component: {type: String,required: true,},componentProps: {type: Object,},},setup(props) {return () =>h(componentMap.value.get(props.component), {...props.componentProps,});},
});

3 组件内使用

<template><formItemv-for="item in formSchema ":component="item.component"v-bind="item.componentProps"v-model:value="formState[item.]"/>
</template>
<script setup lang="ts">import formItem from './formItem.tsx';const formSchema = [{field: 'name',component: 'Input',componentProps: {type: 'number',}]const componentProps = ref({type:'numer'
})
const formState = ref({})</script>