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鼠标移入提示内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 手写Vue弹窗Modal的实现代码

    手写Vue弹窗Modal的实现代码

    这篇文章主要介绍了手写Vue弹窗Modal的实现代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-09-09
  • vue通过style或者class改变样式的实例代码

    vue通过style或者class改变样式的实例代码

    这篇文章主要介绍了vue通过style或者class改变样式的实例代码,在文中给大家提到了vue的一些样式(class/style)绑定,需要的朋友可以参考下
    2018-10-10
  • vue3中使用vuex和vue-router的详细步骤

    vue3中使用vuex和vue-router的详细步骤

    这篇文章主要介绍了vue3中使用vuex和vue-router的步骤,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-12-12
  • vuex 多模块时 模块内部的mutation和action的调用方式

    vuex 多模块时 模块内部的mutation和action的调用方式

    这篇文章主要介绍了vuex 多模块时 模块内部的mutation和action的调用方式,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-07-07
  • 基于vue-draggable 实现三级拖动排序效果

    基于vue-draggable 实现三级拖动排序效果

    这篇文章主要介绍了基于vue-draggable 实现三级拖动排序效果,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-01-01
  • Vue.js的复用组件开发流程完整记录

    Vue.js的复用组件开发流程完整记录

    这篇文章主要给大家介绍了关于Vue.js的复用组件开发流程的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2018-11-11
  • vue代理如何配置重写方法(pathRewrite与rewrite)

    vue代理如何配置重写方法(pathRewrite与rewrite)

    这篇文章主要介绍了vue代理如何配置重写方法(pathRewrite与rewrite),具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03
  • vue模块拖拽实现示例代码

    vue模块拖拽实现示例代码

    这篇文章主要介绍了vue模块拖拽实现示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-03-03
  • vue项目双滑块组件使用

    vue项目双滑块组件使用

    这篇文章主要介绍了vue项目双滑块组件使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-07-07
  • VueX学习之modules和namespacedVueX详细教程

    VueX学习之modules和namespacedVueX详细教程

    这篇文章主要为大家介绍了VueX学习之modules和namespacedVueX详细教程,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-06-06

最新评论