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

Z时代
2024-02-28
分类：IT

题目描述

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

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

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

选项的DOM并没有消失，但是第二次打开没有正确显示
关于Vue3中使用动态渲染函数渲染ElSelect组件出现选项消失的问题

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

相关代码

封装的动态渲染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: '管理员'
          }
        ]      }