网站的模块,企业网站建设公司 末路,青岛网站设计哪家好,wordpress推送服务器一、背景
在Vue3项目中#xff0c;想让单元格的内容是由 #xff1a;图标具体内容组成的#xff0c;类似以下效果#xff1a;
二、图标
Element-Plus 可以在Element-Plus里面找是否有符合需求的图标iconfont 如果Element-Plus里面没有符合需求的#xff0c;也可以在这…一、背景
在Vue3项目中想让单元格的内容是由 图标具体内容组成的类似以下效果
二、图标
Element-Plus 可以在Element-Plus里面找是否有符合需求的图标iconfont 如果Element-Plus里面没有符合需求的也可以在这里面找图标种类更多本博客中的图标就是在该平台的图标库找的
三、实现
1、具体需求
本文中想将皇冠图标数字来显示会员的级别于是在iconfont搜索皇冠
搜索结果如下 选择需要的图标以及下载方式即可 这里下载为图片
2、单元格内容图标具体内容
核心代码
将图标和具体内容放置在一个容器里面其中图标是以图片的形式引入的
完整代码
template!-- 表格 --el-table:datatableData:header-cell-style{ text-align: center }:cell-style{ text-align: center }el-table-column propindex1 label字段1 /el-table-column propindex2 label字段2 /el-table-column propindex3 label字段3 /el-table-column propindex4 label字段4!-- 字段触发提示 --template v-slot:headerel-tooltip placementtop-start effectlight!-- 触发提示内容 --template #contentp classcontent提示内容1/pp classcontent提示内容2/p/templatespan字段4el-icon color#9a9eb1QuestionFilled //el-icon/span/el-tooltip/template!-- 单元格内容图标具体内容 --template #defaultscopediv styledisplay: flex; align-items: centerimgalt皇冠 logosrc../assets/皇冠.pngstylewidth: 8%;height: auto;overflow: hidden;margin-left: 130px;/span stylemargin-left: 1px{{ scope.row.index4 }}/span/div/template/el-table-column/el-table
/template效果如下
