vue3如何动态渲染Element-plus图标

vue3动态渲染Element-plus图标

现在我要动态的渲染成这种

回顾vue2渲染方法
1.首先我在data中定义好需要展示的图标

data(){
	return{
	//所有的键均为 menu一级菜单所对应的id
	 iconsObj: {
        125: "el-icon-user-solid",
        103: "el-icon-turn-off",
        101: "el-icon-s-goods",
        102: "el-icon-tickets",
        145: "el-icon-monitor",
      },
	}
}

2.进行动态渲染

 <i :class="iconsObj[i.id]"></i>

所以在vue2中使用Element UI动态变换图标时就可以通过：class的方式渲染图标。
但是Element Plus就不行了，我们知道引用的图标是组件形式
vue3渲染方法

1.然后再setup中进行一个定义

<style setup>
	//键也均为menu一级菜单的id
	//写法1
	let iconsObj = {
	  125: <User/>,
	  103: <Operation/>,
	  101: <GoodsFilled/>,
	  102: <Tickets/>,
	  145: <Histogram/>,
	};
	//写法2
	let iconsObj = {
	  125: 'User',
	  103: 'Operation',
	  101: 'GoodsFilled',
	  102: 'Tickets',
	  145: 'Histogram',
	};
</style>

2.然后进行动态渲染

<el-icon>
     <component :is='iconsObj[i.id]'/>
</el-icon>