给el-table表头添加icon图标，以及鼠标移入icon时显示el-tooltip提示内容

在你的代码中，你已经正确地使用了 el-tooltip 组件来实现鼠标划过加号时显示提示信息。el-tooltip 组件的 content 属性设置了提示信息的内容，placement 属性设置了提示信息的位置。

你需要确保 el-tooltip 组件的 content 属性和 placement 属性设置正确，并且 el-tooltip 组件被放置在需要提示的元素内部。

以下是一个示例，展示了如何使用 el-tooltip 组件：

<template>
  <el-table ref="multipleTable" :data="data" tooltip-effect="dark" border>
    <el-table-column prop="addtime" label="时间" align="center" width="150">
      <template #header>
        <div>
          <span>时间</span>
          <el-tooltip class="item" effect="dark" content="这是提示信息" placement="top">
            <Icon icon="ep:plus" class="mr-5px" />
          </el-tooltip>
        </div>
      </template>
    </el-table-column>
  </el-table>
</template>

<script setup>
import { ref } from 'vue';
import { ElTable, ElTableColumn, ElTooltip } from 'element-plus';
import 'element-plus/dist/index.css';

const multipleTable = ref(null);
const data = ref([
  // 这里填写表格的实际数据，示例如下
  { addtime: '2024-12-01' },
  { addtime: '2024-12-02' }
]);
</script>

在这个示例中，当用户将鼠标移到加号上时，会显示一个提示信息 “这是提示信息”。

注意，你需要确保 el-tooltip 组件的 content 属性和 placement 属性设置正确，并且 el-tooltip 组件被放置在需要提示的元素内部。

原文地址：https://blog.csdn.net/qq_16242613/article/details/144245796

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！