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 相关文章推荐
24款非常有用的 jQuery 插件分享
Apr 06 Javascript
Jquery:ajax实现翻页无刷新功能代码
Aug 05 Javascript
顶部缓冲下拉菜单导航特效的JS代码
Aug 27 Javascript
JavaScript的RequireJS库入门指南
Jul 01 Javascript
学习JavaScript设计模式(代理模式)
Dec 03 Javascript
根据Bootstrap Paginator改写的js分页插件
Dec 25 Javascript
Three.js如何实现雾化效果示例代码
Sep 27 Javascript
浅谈Angular 中何时取消订阅
Nov 22 Javascript
Vue 解决多级动态面包屑导航的问题
Nov 04 Javascript
Angular之jwt令牌身份验证的实现
Feb 14 Javascript
javascript实现画板功能
Apr 12 Javascript
微信小程序实现购物车小功能
Dec 30 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
配置支持SSI
2006/11/25 PHP
详解:――如何将图片储存在数据库里
2006/12/05 PHP
php输出表格的实现代码(修正版)
2010/12/29 PHP
PHP使用glob函数遍历目录或文件夹的方法
2014/12/16 PHP
PHP简单实现HTTP和HTTPS跨域共享session解决办法
2015/05/27 PHP
php实现与python进行socket通信的方法示例
2017/08/30 PHP
Laravel中批量赋值Mass-Assignment的真正含义详解
2017/09/29 PHP
PHP开发实现微信退款功能示例
2017/11/25 PHP
PHP扩展安装方法步骤解析
2020/11/24 PHP
JScript中的undefined和&quot;undefined&quot;的区别
2007/03/08 Javascript
js下判断 iframe 是否加载完成的完美方法
2010/10/26 Javascript
jquery.combobox中文api和例子,修复了上面的小bug
2011/03/28 Javascript
从URL中提取参数与将对象转换为URL查询参数的实现代码
2012/01/12 Javascript
JavaScript的arguments对象应用示例
2014/09/15 Javascript
JS小游戏之仙剑翻牌源码详解
2014/09/25 Javascript
BootStrap的alert提示框的关闭后再显示怎么解决
2016/05/17 Javascript
轻松掌握JavaScript代理模式
2016/08/26 Javascript
JS实现动态增加和删除li标签行的实例代码
2016/10/16 Javascript
微信小程序(六):列表上拉加载下拉刷新示例
2017/01/13 Javascript
jQuery完成表单验证的实例代码(纯代码)
2017/09/30 jQuery
在Create React App中启用Sass和Less的方法示例
2019/01/16 Javascript
如何使用Javascript中的this关键字
2020/05/28 Javascript
详解Python的Twisted框架中reactor事件管理器的用法
2016/05/25 Python
用 Python 爬了爬自己的微信朋友(实例讲解)
2017/08/25 Python
Python通过future处理并发问题
2017/10/17 Python
python生成excel的实例代码
2017/11/08 Python
详解Django 中是否使用时区的区别
2018/06/14 Python
python 去除txt文本中的空格、数字、特定字母等方法
2018/07/24 Python
基于django channel实现websocket的聊天室的方法示例
2019/04/11 Python
python tkinter组件使用详解
2019/09/16 Python
从numpy数组中取出满足条件的元素示例
2019/11/26 Python
Windows10+anacond+GPU+pytorch安装详细过程
2020/03/24 Python
PyCharm中关于安装第三方包的三个建议
2020/09/17 Python
某公司部分笔试题
2013/11/05 面试题
父亲八十大寿答谢词
2014/01/23 职场文书
Python进阶学习之带你探寻Python类的鼻祖-元类
2021/05/08 Python