拒绝v-if判断组件显隐 tsx版本

定义组件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>
 <formItem
                v-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>