VUE3+element-plus如何在组件内动态加载element-plus组件？

Question

系统使用了element-plus按需载入的方式

我需要在一个组件内动态加载某些组件

<template>
    <component :is="loader(conf.type)" v-model="modelValue[conf.key]"/>
</template>

<script setup lang="ts">
async function loader(type: keyof typeof Modules) {
  return defineAsyncComponent({
      loader: () => import('element-plus')['ElInput']
  })
}
</script>

这个loader方法一直无法正确渲染相应组件，例如type传入“ELInput”时系统会报个警告

[Vue warn]: Component is missing template or render function. 
  at <Anonymous ref_for=true ref="formKit-component-a" key="a"  ... > 
  at <ElFormItem label=undefined label-width="120px" prop="a"  ... > 
  at <ElCol key="a" span=24 > 
  at <ElRow gutter=30 type="flex" style= {row-gap: '0px'}  ... > 
  at <ElForm ref=1698981590012 model= {a: 1} key=1698981590012  ... > 
  at <Index modelValue= {a: 1} onUpdate:modelValue=fn config= [{…}] > 
  at <Fuck onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > key="/home/fuck" > 
  at <KeepAlive> 
  at <BaseTransition mode="out-in" appear=false persisted=false  ... > 
  at <Transition name="router-fade" mode="out-in" > 
  at <RouterView> 
  at <Main> 
  at <ElMain> 
  at <ElContainer> 
  at <Default onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > > 
  at <RouterView> 
  at <ElConfigProvider locale= {name: 'zh-cn', el: {…}} size="default" > 
  at <App>

尝试过import('element-plus/lib/components/ElInput')这种写法页不行，报错：[plugin:vite:import-analysis] No known conditions for "./lib/components/ElInput" specifier in "element-plus" package

求大神指导

Answer 1

建议改为 计算属性，因为涉及异步加载组件，我这边有实现加载成功