关于Vue3中使用动态渲染函数渲染ElSelect组件出现选项消失的问题

题目描述

在开发中使用自己封装的动态生成表单组件的过程中,出现了在ElDialog中第一次打开正常显示ElSelect下拉选项,关闭弹窗再次打开ElDialog后,ElSelect下拉选项消失的问题,目前可以通过在ElDialog添加destroy-on-close来避免这个问题,但还是找不到问题产生的原因。

第一次打开ElDialog
image.png

第二次打开选项消失
image.png

选项的DOM并没有消失,但是第二次打开没有正确显示
image.png

控制台输出
image.png

相关代码

封装的动态渲染element组件代码=>DynamicFormItem.vue

<script>
import { defineComponent, toRefs, toRef, h, resolveComponent } from 'vue'
import { kebabCase } from 'lodash'

import {
  ElInput,
  ElInputNumber,
  ElSelect,
  ElOption,
  ElRadio,
  ElRadioGroup
} from 'element-plus'

import UploadFile from '@/components/UploadFile'

export default defineComponent({
  components: {
    ElInput,
    ElInputNumber,
    ElSelect,
    ElOption,
    ElRadio,
    ElRadioGroup,
    UploadFile
  },
  props: {
    component: { type: String, required: true },
    modelValue: [String, Number, Array],
    children: Array
  },
  emits: ['onUpdate:modelValue'],
  setup(props, { emit }) {
    const { component, modelValue } = toRefs(props)
    const FormComponent = resolveComponent(kebabCase(component.value))
    const children = toRef(props, 'children')

    return () =>
      h(
        FormComponent,
        {
          modelValue: modelValue.value,
          'onUpdate:modelValue': value => emit('update:modelValue', value)
        },
        () =>
          children.value?.map(item => {
            const ChildrenComponent = resolveComponent(
              kebabCase(item.component)
            )
            return h(ChildrenComponent, item.props, item.slot)
          })
      )
  }
})
</script>

往DynamicFormItem.vue传入的props children

const formItems = reactive([
      {
        prop: 'username',
        label: '用户名',
        component: 'ElInput'
      },
      {
        prop: 'name',
        label: '姓名',
        component: 'ElInput'
      },
      {
        prop: 'roleId',
        label: '角色',
        component: 'ElSelect',
        children: [
          {
            component: 'ElOption',
            props: {
              value: '1'
            },
            slot: '管理员'
          }
        ]
      }
阅读 3.3k
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题