Vue3+ElementPlus：icon图标不显示（给表格字段里添加图标）

一、背景

• 在Vue3项目中，想在表格的字段中引入图标
• 因为给字段做了触发提示，希望用户能够注意到这个功能，因此想加个图标提示一下用户，效果如下：
  
• 触发提示效果如下：
  
  （样式这里就不进行优化了）

二、遇到的问题

• 在给表格字段添加图标时，出现过icon图标不显示
• 弄不清楚触发提示、表格字段名称、图标之间的包含关系
• 注：表格和图标用的都是Element-Plus的组件

三、安装及引入

Element-Plus的安装及图标注册在官方网页上均有说明：

• 安装

npm install element-plus --save

• 引入

在main.js文件中：

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

import ElementPlus from 'element-plus' //全局引入
import 'element-plus/dist/index.css'

// main.js:注册所有图标
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
const app = createApp(App)
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
    app.component(key, component)
}
createApp(App).use(ElementPlus).use(store).use(router).mount('#app')

• 核心代码：
  

四、在表格的字段中添加图标

1、表格字段组成：文字+icon图标

• 表格的模板代码如下：

<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>
    </el-table-column>
  </el-table>
</template>

• 以字段4为例，触发提示、表格字段名称、图标间的包含关系如下：
  

2、图标的引入和使用

• 代码如下：

<script>
import { onMounted, ref } from "vue";
import { QuestionFilled } from "@element-plus/icons-vue";

export default {
  components: {
    QuestionFilled,
  },

  setup() {
    const tableData = ref([]); //热门课程的前10条数据
    tableData.value = [
      {
        index1: 1,
        index2: 458,
        index3: 90,
        index4: 8539,
      },
      { index1: 2, index2: 670, index3: 98, index4: 7510 },
      { index1: 3, index2: 240, index3: 45, index4: 6703 },
      { index1: 4, index2: 560, index3: 100, index4: 2340 },
    ];

    onMounted(() => {});
    return {
      tableData,
    };
  },
};
</script>

• 根据需求引入图标，比如这里我想引入的是问号图标：
  ！！！当时就是忘记在components那里忘记声明问号图标了，导致我的图标一直不显示
  

• 在页面上使用el-icon标签引入图标，并可以对图标进行样式上的设计，比如图标的颜色：
  

• 最终效果如下：