element-ui如何在table中使用tooltip

更新时间：2023年10月17日 15:43:05 作者：怕是个神仙啊

这篇文章主要介绍了element-ui如何在table中使用tooltip问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

element-ui在table中使用tooltip

element-ui官网上提供了tooltip-effect和show-overflow-tooltip属性

使用table中的tooltip-effect属性，

el-table 标签上加 tooltip-effect="light"
el-table-column标签上加 :show-overflow-tooltip="true"

如下所示：

<el-table :data="tableData" tooltip-effect="light">
      <el-table-column prop="name" label="姓名" :show-overflow-tooltip="true">
      </el-table-column>
</el-table>

效果图如下：

给element-ui的table表的表头添加tooltip提示语

需求

给element-ui的table表的表头的某一列鼠标滑过的时候会有提示语显示

废话不多说直接上实例：

需要实现的需求就是上图所示，在当前列的dom标签中添加相对应的方法，

示例代码如下：

<el-table-column prop="hour" label="小时"  :render-header="renderHeader"/>

renderHeader (h,{column}) { // h即为cerateElement的简写，具体可看vue官方文档
return h(
‘div',[
h(‘span', column.label),
h(‘el-tooltip',{
props:{
effect:‘dark',
content:‘小时统计该时段整体数据，如当小时为09:00时，那统计的就是09:00-09:59时段的整体曝光量和设备屏数',
placement:‘top',
},
},
[h(‘i', {
class:‘el-icon-question',
style:‘color:#409eff;margin-left:5px;cursor:pointer;'
})],
{content: ‘小时统计该时段整体数据，如当小时为9:00时，那统计的就是09:00-09:59时段的整体曝光量和设备屏数'})
]
);
},

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

如何写一个 Vue3 的自定义指令
这篇文章主要介绍了如何写一个 Vue3 的自定义指令，如果我们想在 Vue.js 的项目中实现图片懒加载，那么用自定义指令就再合适不过了，那么接下来就让我手把手带你用 Vue3 去实现一个图片懒加载的自定义指令 v-lazy,需要的朋友可以参考一下
2022-01-01
Vuex给state中的对象新添加属性遇到的问题及解决
这篇文章主要介绍了Vuex给state中的对象新添加属性遇到的问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-01-01
Vue+FormData+axios实现图片上传功能的项目实战
本文主要介绍了Vue+FormData+axios实现图片上传功能的项目实战，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2023-06-06
vue.js 实现点击展开收起动画效果
这篇文章主要介绍了vue.js 实现点击展开收起动画效果，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-07-07
Vue 3.0自定义指令的使用入门
在 Vue 的项目中，我们经常会遇到 v-if、v-show、v-for 或 v-model 这些内置指令，它们为我们提供了不同的功能。除了使用这些内置指令之外，Vue 也允许注册自定义指令。接下来，将使用Vue 3官方文档自定义指令章节中使用的示例，来一步步揭开自定义指令背后的秘密。
2021-05-05
深入浅析vue-cli@3.0 使用及配置说明
这篇文章主要介绍了vue-cli@3.0 使用及配置说明,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
2019-05-05
Vue.js展示AJAX数据简单示例讲解
当通过AJAX方式取回数据后，使用vue.js可以完美地按一定逻辑在页面上的展示数据，代码简单、优美、自然，而且便于与在用的页面框架集成，本文给大家介绍Vue.js展示AJAX数据简单示例
2017-03-03
vue+el-menu实现菜单栏无限多层级分类
这篇文章主要为大家详细介绍了vue+el-menu实现菜单栏无限多层级分类，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-03-03
关于Vue中echarts响应式页面变化resize()的用法介绍
Vue项目中开发数据大屏，使用echarts图表根据不同尺寸的屏幕进行适配，resize()可以调用echarts中内置的resize函数进行自适应缩放，本文将给大家详细介绍resize()的用法,需要的朋友可以参考下
2023-06-06
详解Vue.js之视图和数据的双向绑定(v-model)
本篇文章主要介绍了Vue.js之视图和数据的双向绑定(v-model)，使用v-model指令,使得视图和数据实现双向绑定，有兴趣的可以了解一下
2017-06-06