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

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

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

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

javascript 复制代码
<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 组件被放置在需要提示的元素内部。

相关推荐
举个栗子dhy1 分钟前
解决在父元素上同时使用 onMouseEnter和 onMouseLeave时导致下拉菜单无法正常展开或者提前收起问题
前端·javascript·react.js
前端与小赵8 分钟前
vue3和vue2生命周期的区别
前端·javascript·vue.js
一鹿有你们~14 分钟前
面试题-前端如何解决跨域
前端·javascript·跨域
Sailing20 分钟前
👉 👉 Vue3 自定义 Hook:从入门到进阶(~~安静的阅读2分钟,相信我,这篇文章一定能给你启发)
前端·javascript·vue.js
aol12136 分钟前
X6官方示例「数据加工DAG图」转为Vue版
前端·vue.js
一枚前端小能手37 分钟前
🚀 主线程卡死用户要骂娘?Web Worker让你的应用丝滑如德芙
前端·javascript
小桥风满袖40 分钟前
极简三分钟ES6 - Promise
前端·javascript
小高00741 分钟前
性能优化零成本:只加3行代码,FCP从1.8s砍到1.2s
前端·javascript·面试
用户669820611298242 分钟前
vue3 hooks、utils、data这几个文件夹分别是放什么的?
javascript·vue.js