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标签引入图标,并可以对图标进行样式上的设计,比如图标的颜色:
    在这里插入图片描述

  • 最终效果如下:
    在这里插入图片描述

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
THE END
分享
二维码
< <上一篇
下一篇>>