1.Element-plus的菜单渲染问题跨越了Element-UI，终于来到了Element-plus。回到一个老问题，菜单的渲染。创建一个菜单数组，使用v-for渲染数组，生成一个菜单，这是一个很常见的操作。但是在运行的过程中，出现了一个小问题，就是关于图标的渲染问题。我们知道在Element-plus中，渲染一个带图标的菜单项是这样的：titleicon图标直接以组件的形式渲染。那么，当我们尝试使用v-for进行列表渲染时，如何渲染图标组件就成了一个问题。直接用双花括号{{}}肯定不行，会直接把label变成text。它也不适用于v-html，它只能呈现原生HTML标签。什么鬼？2.如何动态渲染自定义组件？在中搞模板语法是行不通的。然后尝试另一条路线。搜索引擎愉快地与海量信息搏斗后，找到了切入点：渲染函数。说实话，我早就应该想到这一点，毕竟渲染组件只有两种方式。不过render的使用频率太低了，选择性的忘记了。然后尝试一下。编写一个组件，通过props接收图标的标签，然后进行渲染。//注意在vue3中，render函数中没有更多的参数，需要按需加载h函数。import{h}from'vue';exportdefault{props:{//Odometerhtml:String},render(){returnh('el-icon',null,h(this.html));}}果然没有达到想要的效果。经常使用vue开发的朋友肯定一眼就发现了一个问题：在使用h函数生成虚拟DOM节点时，如果要生成组件，第一个参数可以直接使用导入的组件。如果使用字符串，则该字符串将完整呈现为HTML标记，而不是组件。（参考链接）修改：import{h}from'vue';import{ElIcon}from'element-plus';exportdefault{props:{//Odometerhtml:String},components:{ElIcon},render(){返回h(ElIcon,null,h(this.html));}}还是不对，图标名是传入的字符串，无法直接获取导入的组件。吓得赶紧又翻了一遍文档，发现最后一行有这么一句话：如果一个组件是按名称注册的，不能直接导入（比如用库全局注册），可以用resolveComponent()来解决这个问题。我懂了。..好吧，给出最终答案：{{item.title}}//DynamicIconimport{h,resolveComponent}from'vue';从'@element-plus/icons-vue'导入{里程表，ChatDotRound}；exportdefault{props:{//Odometerhtml:String},components:{Odometer,ChatDotRound},render(){//ElIcon直接导入constIconBox=resolveComponent('ElIcon');constIcon=resolveComponent(this.html);返回h(IconBox,null,h(Icon));}}3。总结最后，我们来总结一下。要动态渲染组件，您需要使用props和渲染函数。使用h函数时，会生成组件的虚拟vnode，直接使用导入的组件即可。如果只能获取到一个组件名，则使用resolveComponent函数手动解析注册的组件。
