vue3中使用h()函数加载elementPlus 组件

需求：后端返回一段html代码片段，前端页面直接渲染该片段，但是需要对代码片段中的一些、元素进行替换，比如，某个元素替换成 el-tree-select。 

import { h, render } from 'vue';
import { ElTreeSelect, ElSelect, ElOption, ElDatePicker, ElConfigProvider } from 'element-plus';
export const renderElTreeSelect = (el, data) => {
    // 递归构建部门树
    function buildDeptTree(parentId) {
        return data
            .filter((dept) => dept.deptParent === parentId) // 找到所有子节点
            .map((child) => ({
                ...child,
                children: buildDeptTree(child.deptId) // 递归构建子节点的子树
            }));
    }
    // 创建一个dom元素
    const dom = document.createElement('div');
    // 将元素插入到原本的元素之前
    el.before(dom);
    // 定义一个
    const comp = defineComponent({
        setup() {
            const selectedValue = ref('');
            const treeData = ref([]);
            // 获取组织机构树
            treeData.value = buildDeptTree(0);
            return () =>
                h(ElTreeSelect, {
                    // 树形数据
                    data: treeData.value,
                    // 唯一标识字段
                    nodeKey: 'deptId',
                    props: {
                        label: 'deptName'
                    },
                    // 绑定值
                    modelValue: selectedValue.value,
                    // 变更事件
                    'onUpdate:modelValue': (val) => {
                        el.attr('value', val);
                        selectedValue.value = val;
                    },
                    placeholder: '请选择部门'
                });
        }
    });
    // 渲染组件
    render(h(comp), dom);
    // 隐藏原来的组件：后面可能取值需要，暂定隐藏不删除
    el.hide();
};