elementui el-table中如何给表头 el-table-column 加一个鼠标移入提示说明

 更新时间:2024年11月15日 14:48:55   作者:向明天乄  
本文通过实例代码介绍如何在使用Element UI的el-table组件时为表头添加提示功能,通过结合el-tooltip组件实现鼠标移入时显示提示信息,感兴趣的朋友跟随小编一起看看吧

elementui el-table中给表头 el-table-column 加一个鼠标移入提示说明

前言

在使用el-table 表格中有些表格的表头需要加入一些提示,鼠标移入则出现提示,非常实用,我是通过el-table中的el-tooltip实现的,以下的效果预览

代码实现

  <el-table ref="multipleTable" :data="data" tooltip-effect="dark" border >
      <el-table-column prop="addtime" label="时间" align="center" width="150">
         <template slot="header">
            <div>
              <span>时间</span>
             <el-tooltip class="item" effect="dark" content="今日工单是操作工单时间,其他则是工单录入时间" placement="top">
              <span class="iconfont icon-wenhao" style="margin-left: 5px;"></span>
              </el-tooltip>
            </div>
        </template>
        </el-table-column>
  </el-table>

补充:element-ui] el-table表格头添加图标-鼠标移入显示el-tooltip提示信息

element-ui] el-table表格头添加图标-鼠标移入显示el-tooltip提示信息

方法一、render-header=“renderPrice”(此方法无法使tooltip换行)

只是单纯的想在table中添加图标和tooltip

在el-table-column中绑定:render-header=“renderPrice”(此方法无法使tooltip换行)

 <el-table-column label="age" align="center" width="200">
</el-table-column>
renderPrice(h, { column, $index }) {
      return [
        column.label,
        h(
          'el-tooltip',
          {
            props: {
              content: '11111'
              placement: 'top'  // 悬停内容展示的位置
            }
          },
          [h('span', { class: { 'el-icon-question': true }})] // 图标
        )
      ]
    },

方法二、

使用组件插槽,elementui已封装好

<el-table-column align="center" label="缩力" width="150px">
 <template v-slot:header='scope'>     // 插槽插入header
	 <span>
	   缩力
	  <el-tooltip
	    :aa="scope"
	    class="item"
	    effect="dark"
	    placement="top-start"
	   >
	   <i class="el-icon-question"> </i>
	   <div style="width: 200px" slot="content">
	           弱宫缩:宫缩持续20-30秒 <br />
	           中度宫缩:宫缩持续30-40秒<br />
	           强度宫缩:宫缩持续40秒以上
	   </div>
	  </el-tooltip>
	</span>
 </template>
 </el-table-column>

elementUI表格头添加图标-鼠标移入显示el-tooltip提示信息

到此这篇关于elementui el-table中如何给表头 el-table-column 加一个鼠标移入提示说明的文章就介绍到这了,更多相关elementui el-table鼠标移入提示内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • Python实现图片二值化的详细代码

    Python实现图片二值化的详细代码

    图像二值化就是将图像上的像素点的“灰度值”设置为[0, 0, 0]或[255, 255, 255],即要么纯黑,要么纯白,这篇文章主要介绍了Python实现图片二值化,需要的朋友可以参考下
    2024-05-05
  • 详解vue axios二次封装

    详解vue axios二次封装

    这篇文章给大家分享了vue axios二次封装的相关知识点等内容以及实例代码,有兴趣的朋友可以参考学习下。
    2018-07-07
  • Vue3在router中使用pinia报错的简单解决办法

    Vue3在router中使用pinia报错的简单解决办法

    这篇文章主要给大家介绍了关于Vue3在router中使用pinia报错的简单解决办法,什么是pinia,可以理解为状态管理工具,文中通过图文介绍的非常详细,需要的朋友可以参考下
    2023-08-08
  • vue3 hook自动导入原理及使用

    vue3 hook自动导入原理及使用

    最近学习了hooks,特地写一篇文章加深一下印象,下面这篇文章主要给大家介绍了关于vue3 hook自动导入原理及使用的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-10-10
  • vue项目中锚点定位替代方式

    vue项目中锚点定位替代方式

    今天小编就为大家分享一篇vue项目中锚点定位替代方式,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-11-11
  • element UI中el-dialog实现拖拽功能示例代码

    element UI中el-dialog实现拖拽功能示例代码

    我们在开发中常会遇见拖拽的功能,下面这篇文章主要给大家介绍了关于element UI中el-dialog实现拖拽功能的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-12-12
  • Vue状态管理工具Pinia的安装与使用教程

    Vue状态管理工具Pinia的安装与使用教程

    这篇文章主要介绍了Vue状态管理工具Pinia的安装与使用,一步一步学习如何将pinia运用到项目实战中去,文中有详细的安装教程和使用方法,并通过代码示例讲解的非常详细,需要的朋友可以参考下
    2024-03-03
  • Vuex利用state保存新闻数据实例

    Vuex利用state保存新闻数据实例

    本篇文章主要介绍了Vuex利用state保存新闻数据实例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-06-06
  • 解决vue.js出现Vue.js not detected错误的问题

    解决vue.js出现Vue.js not detected错误的问题

    这篇文章主要介绍了解决vue.js出现Vue.js not detected错误的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • Vue 实时监听窗口变化 windowresize的两种方法

    Vue 实时监听窗口变化 windowresize的两种方法

    这篇文章主要介绍了Vue 实时监听窗口变化 windowresize的两种方法,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-11-11

最新评论