一、背景

在Vue3項目中，想讓單元格的內容是由 ：圖標+具體內容組成的，類似以下效果：

二、圖標

• Element-Plus
  可以在Element-Plus里面找是否有符合需求的圖標
• iconfont
  如果Element-Plus里面沒有符合需求的，也可以在這里面找圖標，種類更多，本博客中的圖標就是在該平臺的圖標庫找的

三、實現

1、具體需求

本文中，想將：皇冠圖標+數字來顯示會員的級別，于是在iconfont搜索皇冠：

• 搜索結果如下：

• 選擇需要的圖標以及下載方式即可：
  （這里下載為圖片）
  

2、單元格內容：圖標+具體內容

• 核心代碼

將圖標和具體內容放置在一個容器里面，其中圖標是以圖片的形式引入的：

• 完整代碼

<template><!-- 表格 --><el-table:data="tableData":header-cell-style="{ 'text-align': 'center' }":cell-style="{ 'text-align': 'center' }"><el-table-column prop="index1" label="字段1" /><el-table-column prop="index2" label="字段2" /><el-table-column prop="index3" label="字段3" /><el-table-column prop="index4" label="字段4"><!-- 字段觸發提示 --><template v-slot:header><el-tooltip placement="top-start" effect="light"><!-- 觸發提示內容 --><template #content><p class="content">提示內容1</p><p class="content">提示內容2</p></template><span>字段4<el-icon color="#9a9eb1"><QuestionFilled /></el-icon></span></el-tooltip></template><!-- 單元格內容：圖標+具體內容 --><template #default="scope"><div style="display: flex; align-items: center"><imgalt="皇冠 logo"src="../assets/皇冠.png"style="width: 8%;height: auto;overflow: hidden;margin-left: 130px;"/><span style="margin-left: 1px">{{ scope.row.index4 }}</span></div></template></el-table-column></el-table>
</template>

• 效果如下：