VUE2.0+ElementUI2.0表格el-table实现表头扩展el-tooltip


Posted in Javascript onNovember 30, 2018

ElementUI2.0的表格的扩展:

elementUI表格table

elementUI文字提示Tooltip

如果要实现鼠标移到表头有注释或者弹框该怎么添加呢?

<el-table
  empty-text="正在加载中..."
  :data="contentList"
  style="width: 100%"
  @sort-change="sort"
  class="pro-table-item"
  tooltip-effect="dark"
>
  <template v-for="(item,index) in titleList">
   <el-table-column
   
 v-if="index == '0'"
   
 :prop="index.toString()"
   
 :label="item"
   
 sortable="custom"
   
 min-width="120"
   
 :render-header="renderHeader"
     > 
  
 </el-table-column>
   <el-table-column
    v-else
    :prop="index.toString()"
   
 :label="item"
   
 min-width="120"
   
 :render-header="renderHeader"
   
 show-overflow-tooltip

 
 </el-table-column>

 </template>
</el-table>

注: index == 0 时是一个排序功能的按钮

在使用:render-header之前,首先要 npm i babel-helper-vue-jsx-merge-props babel-plugin-syntax-jsx babel-plugin-transform-vue-jsx --s   安装一个解析包,然后在babelrc里配置"plugins": ["transform-runtime", "transform-vue-jsx"]

renderHeader(h, { column }) {
    if(column.label.length>13) {
     return (
       <el-tooltip
        class="item"
        effect="dark"
        content={column.label}
        placement="top"
       >
       <span>{column.label}</span>
       </el-tooltip>
    )
    } else {
     return (
      <span>{column.label}</span>
     )
    }
   },

并不想让所有的表头都弹出tooltip,只想让超出长度并且

overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;

隐藏起来的内容在鼠标悬浮时有飘窗,暂时没有更好的办法,采取的办法是检测表头内容的长度,不过这种方式并不能标准的判断哪一个表头需要飘窗。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js 实现菜单左右滚动显示示例介绍
Nov 21 Javascript
javascript实现淘宝幻灯片广告展示效果
Apr 27 Javascript
在JavaScript中如何解决用execCommand(
Oct 19 Javascript
Function.prototype.apply()与Function.prototype.call()小结
Apr 27 Javascript
深入理解JavaScript中为什么string可以拥有方法
May 24 Javascript
实例详解Vue项目使用eslint + prettier规范代码风格
Aug 20 Javascript
vue动画之点击按钮往上渐渐显示出来的实例
Sep 29 Javascript
js序列化和反序列化的使用讲解
Jan 19 Javascript
详解Node.js异步处理的各种写法
Jun 09 Javascript
layui实现鼠标移动到单元格上显示数据的方法
Sep 11 Javascript
vue-video-player 断点续播的实现
Feb 01 Vue.js
小程序wx.getUserProfile接口的具体使用
Jun 02 Javascript
VUE2.0+ElementUI2.0表格el-table循环动态列渲染的写法详解
Nov 30 #Javascript
js字符串倒序的实例代码
Nov 30 #Javascript
实例讲解JavaScript截取字符串
Nov 30 #Javascript
支付宝小程序自定义弹窗dialog插件的实现代码
Nov 30 #Javascript
使用canvas实现一个vue弹幕组件功能
Nov 30 #Javascript
VUE基于NUXT的SSR 服务端渲染
Nov 30 #Javascript
Nuxt.js开启SSR渲染的教程详解
Nov 30 #Javascript
You might like
一贴学会PHP 新手入门教程
2009/08/03 PHP
PHP中文URL编解码(urlencode()rawurlencode()
2010/07/03 PHP
JoshChen_php新手进阶高手不可或缺的规范介绍
2013/08/16 PHP
Laravel中encrypt和decrypt的实现方法
2017/09/24 PHP
PHP实现链式操作的三种方法详解
2017/11/16 PHP
javascript 写类方式之三
2009/07/05 Javascript
jQuery创建平滑的页面滚动(顶部或底部)
2013/02/26 Javascript
jquery 按钮状态效果 正常、移上、按下
2013/08/12 Javascript
使用JSON.parse将json字符串转换成json对象的时候会出错
2014/09/04 Javascript
学习javascript面向对象 实例讲解面向对象选项卡
2016/01/04 Javascript
javascript鼠标右键菜单自定义效果
2020/12/08 Javascript
你一定会收藏的Nodejs代码片段
2016/02/04 NodeJs
jQuery实现鼠标滚动图片延迟加载效果附源码下载
2016/06/28 Javascript
全面接触神奇的Bootstrap导航条实战篇
2016/08/01 Javascript
谈谈JavaScript中的几种借用方法
2016/08/09 Javascript
页面间固定参数,通过cookie传值的实现方法
2017/05/31 Javascript
ES6学习之变量的两种命名方法示例
2017/07/18 Javascript
基于Bootstrap框架菜鸟入门教程(推荐)
2017/09/17 Javascript
JS+CSS实现网页加载中的动画效果
2017/10/27 Javascript
JavaScript实现写入文件到本地的方法【基于FileSaver.js插件】
2018/03/15 Javascript
详解Vue-cli3 项目在安卓低版本系统和IE上白屏问题解决
2019/04/14 Javascript
jQuery实现鼠标移入显示蒙版效果
2020/01/11 jQuery
jQuery实现穿梭框效果
2021/01/19 jQuery
[03:03]2014DOTA2国际邀请赛 EG战队专访
2014/07/12 DOTA
python防止随意修改类属性的实现方法
2019/08/21 Python
python 使用opencv 把视频分割成图片示例
2019/12/12 Python
Django框架获取form表单数据方式总结
2020/04/22 Python
零基础小白多久能学会python
2020/06/22 Python
搭建pypi私有仓库实现过程详解
2020/11/25 Python
印度购物网站:TATA CLiQ
2017/11/23 全球购物
介绍一下EJB的分类及其各自的功能及应用
2016/08/23 面试题
行政专员工作职责
2013/12/22 职场文书
工程负责人任命书
2014/06/06 职场文书
朝花夕拾读书笔记
2015/06/29 职场文书
大学生饮品店创业计划书范文
2019/07/10 职场文书
基于PyTorch实现一个简单的CNN图像分类器
2021/05/29 Python