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时段的整体曝光量和设备屏数'})
]
);
},

总结

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

您可能感兴趣的文章:

vue实现动态表单动态渲染组件的方式(2)
这篇文章主要为大家详细介绍了vue实现动态表单动态渲染组件的方式第二篇，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-04-04
vue 实现强制类型转换数字类型转为字符串
今天小编就为大家分享一篇vue 实现强制类型转换数字类型转为字符串，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2019-11-11
对vue v-if v-else-if v-else 的简单使用详解
今天小编就为大家分享一篇对vue v-if v-else-if v-else 的简单使用详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-09-09
Vue2.0 实现页面缓存和不缓存的方式
今天小编就为大家分享一篇Vue2.0 实现页面缓存和不缓存的方式，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2019-11-11
vue-cropper组件实现图片切割上传
这篇文章主要为大家详细介绍了vue-cropper组件实现图片切割上传，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-05-05
关于移动端与大屏幕自适应适配方案
这篇文章主要介绍了关于移动端与大屏幕自适应适配方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-10-10
Vue CLI3创建项目部署到Tomcat 使用ngrok映射到外网
这篇文章主要介绍了Vue CLI3创建项目部署到Tomcat 使用ngrok映射到外网,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
2019-05-05
vue.js的双向数据绑定Object.defineProperty方法的神奇之处
今天小编就为大家分享一篇关于vue.js的双向数据绑定Object.defineProperty方法的神奇之处，小编觉得内容挺不错的，现在分享给大家，具有很好的参考价值，需要的朋友一起跟随小编来看看吧
2019-01-01
Vue中vue-router路由使用示例详解
Vue Router是Vue提供的路由管理器,将组件与路由一一对应起来,这种对应关系就路由,这篇文章主要介绍了Vue中vue-router路由使用,需要的朋友可以参考下
2024-06-06
vue实现登录界面
这篇文章主要为大家详细介绍了vue实现登录界面，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-06-06