【vue3 element-plus的循环图标】

element-plus

vue3 在用Element Plus布局页面时，遇到了一个图标循环加载的问题。开始不知道如何渲染图标，以为像ElementUI 一样可以通过class进行渲染图标，发现无法使用，让后我发现引用的图标是组件，组件的话就可以使用进行渲染了.

<el-row><el-col :span="12" v-for="(option,index) in card.options" :key="index"><el-buttontype="primary"textstyle="height: 80px; font-size: 36px"><el-icon><component :is="option.icon"/></el-icon><span>{{ option.text }}</span></el-button></el-col></el-row>
<script>
data() {return {cards: {left: [{title: "园区门户",options: [{ icon: "Tickets", text: "园区统计" },{ icon: "Checked", text: "园区状态" },{ icon: "Tickets", text: "园区统计" },{ icon: "Checked", text: "园区状态" },],},{title: "园区服务",options: [{ icon: "Guide", text: "疫情防控" },{ icon: "Grid", text: "信息发布" },],},{title: "物业管理",options: [{ icon: "Histogram", text: "物业统计" },{ icon: "List", text: "报修统计" },],},],right: [{title: "人员管理",options: [{ icon: "User", text: "人员统计" },{ icon: "Folder", text: "更多" },],},{title: "车辆管理",options: [{ icon: "Guide", text: "停车管理" },{ icon: "Folder", text: "更多" },],},{title: "园区安防",options: [{ icon: "", text: "监控管理" },{ icon: "", text: "安全巡检" },],},],},};},
</script>

【vue3 element-plus的循环图标】相关推荐

vue3之 element-plus的循环图标
vue3之 element-plus的循环图标 Vue2中使用Element UI的图标渲染是通过 <i class="el-icon-plus"></i> ...
Vue3 Element Plus 动态图标
Vue3 Element Plus 动态图标 Element Plus 中的图标以组件的形式来使用,而在基于Vue 2.x的Element UI中图标是字符串的形式,这样就导致过去的一些使用习惯不得不 ...
使用Vue3+Element Plus开发Chrome插件
使用Vue3+Element Plus开发Chrome插件引言初始Vue项目的创建 Element-Plus组件的安装及导入其他文件配置 .eslintrc.js文件 vue.config.js ...
vue3 element plus el-input 无法输入问题
最近用vue3 element plus 进行开发,发现el-input 无法输入,代码如下: <template><el-card><template #header& ...
element table for循环出来设置fixed，table底部滚动条无法拖动
element table for循环出来设置fixed,table底部滚动条无法拖动 element 的table 如果用for循环出的,设置fixed后,有可能会导致底部滑动失效,这是因为elem ...
Vue3中使用各类字体图标的正确姿势：本地SVG、Iconfont、FontAwesome、ElementPlus（Icon篇）
前言最近,在 BuildAdmin 项目的开发中,我们规划了一个 Icon 组件,我们希望通过这个组件,能直接同时使用多种图标库的图标(一种语法,实现无限的图标扩展和高度兼容性)并且,实现该 Ico ...
vue3 + element plus + vite 迁移实践
背景最近入职了一家新公司,需要搭建一个后台管理系统,我想着这太简单啦,react antd pro一把梭.然后领导喜欢vue,说vue简单,写起来快-我说行嘛,刚好没写过vue3,那就全用最新技术, ...
vue3 + element plus实现侧边栏
一般前端项目少不了侧边栏.如图所示这些鬼东西特别繁琐,所以我们喜欢找些现成.开源的所谓后台管理的前端框架,开箱即用.方便是方便,而且做得还挺好,问题是,有学习成本,要按照它的规则行事.一些功能是怎么 ...
【Vue】 element ui 引入第三方图标
最近一个项目用到 vue 和 element ui开发前端.使用element ui自带的icon太少,所以引入第三方的.截止目前为止国内外网络上的相关教程我搜索到没超过5篇,而且都不详细,即使全部阅 ...

【vue3 element-plus的循环图标】

element-plus

【vue3 element-plus的循环图标】相关推荐

最新文章

热门文章