vue 实现超长文本截取,悬浮框提示


Posted in Javascript onJuly 29, 2020

vue 超长文本截取,悬浮框提示

样式:

<style>
 .overflow-table .ivu-table-cell{
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;
 }
</style>

table:

<Table border :columns="comDataColunms" :data="comDataList" :loading="tableDataLoading" class="overflow-table table-context"></Table>

主要代码:

{
 title: '统一信用代码',
 key: 'ucCode',
 render: (h, params) => {
 return h('span', {
  domProps: {
  title: params.row.ucCode
  }
 }, params.row.ucCode)
 }
}

补充知识:前端使用ElementUI +Vue table表头添加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
renderHeader(h, { column }) {
if(column.label.length>13) {
return (

{column.label}

)
} else {
return (
{column.label}
)
}
},

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

overflow: hidden;

white-space: nowrap;

text-overflow: ellipsis;

以上这篇vue 实现超长文本截取,悬浮框提示就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
IE8对JS通过属性和数组遍历解析不一样的地方探讨
May 06 Javascript
js动态创建及移除div的方法
Jun 03 Javascript
JavaScript组合模式学习要点
Aug 26 Javascript
js控制li的隐藏和显示实例代码
Oct 15 Javascript
node.js请求HTTPS报错:UNABLE_TO_VERIFY_LEAF_SIGNATURE\的解决方法
Dec 18 Javascript
微信小程序图表插件(wx-charts)实例代码
Jan 17 Javascript
基于Angular.js实现的触摸滑动动画实例代码
Feb 19 Javascript
JavaScript实现时间表动态效果
Jul 15 Javascript
JavaScript定义及输出螺旋矩阵的方法详解
Dec 01 Javascript
详解Vue+axios+Node+express实现文件上传(用户头像上传)
Aug 10 Javascript
Vue 开发必须知道的36个技巧(小结)
Oct 09 Javascript
Vue可自定义tab组件用法实例
Oct 24 Javascript
javascript实现移动端触屏拖拽功能
Jul 29 #Javascript
Vue实现移动端拖拽交换位置
Jul 29 #Javascript
vue和H5 draggable实现拖拽并替换效果
Jul 29 #Javascript
vue同个按钮控制展开和折叠同个事件操作
Jul 29 #Javascript
JavaScript编写开发动态时钟
Jul 29 #Javascript
js编写简易的计算器
Jul 29 #Javascript
从0到1学习JavaScript编写贪吃蛇游戏
Jul 28 #Javascript
You might like
基于Zookeeper的使用详解
2013/05/02 PHP
探讨PHP调用时间格式的参数详解
2013/06/06 PHP
PHP ignore_user_abort函数详细介绍和使用实例
2014/07/15 PHP
PHP中echo和print的区别
2014/08/28 PHP
php实现读取内存顺序号
2015/03/29 PHP
php自动更新版权信息显示的方法
2015/06/19 PHP
php版交通银行网银支付接口开发入门教程
2016/09/26 PHP
php和asp语法上的区别总结
2019/05/12 PHP
js 页面传参数时 参数值含特殊字符的问题
2009/12/13 Javascript
javascript 二分法(数组array)
2010/04/24 Javascript
IE中jquery.form中ajax提交没反应解决方法分享
2012/09/11 Javascript
JavaScript高级程序设计(第3版)学习笔记10 再访js对象
2012/10/11 Javascript
jQuery动态设置form表单的enctype值(实现代码)
2013/07/04 Javascript
js实现iframe跨页面调用函数的方法
2014/12/13 Javascript
JS常见问题之为什么点击弹出的i总是最后一个
2016/01/05 Javascript
JavaScript判断数字是否为质数的方法汇总
2016/06/02 Javascript
jquery checkbox无法用attr()二次勾选问题的解决方法
2016/07/22 Javascript
微信小程序 视图层(xx.xml)和逻辑层(xx.js)详细介绍
2016/10/13 Javascript
jquery实现瀑布流效果 jquery下拉加载新数据
2016/12/12 Javascript
js继承实现方法详解
2016/12/16 Javascript
过期软件破解办法实例详解
2017/01/04 Javascript
基于JavaScript实现验证码功能
2017/04/01 Javascript
vue项目中api接口管理总结
2018/04/20 Javascript
electron + vue项目实现打印小票功能及实现代码
2018/11/25 Javascript
koa2 用户注册、登录校验与加盐加密的实现方法
2019/07/22 Javascript
微信小程序canvas截取任意形状的实现代码
2020/01/13 Javascript
[00:53]TI3正赛第三天 DK怒破A队不败金身 现场国旗飘扬热血激昂
2013/08/10 DOTA
跟老齐学Python之从格式化表达式到方法
2014/09/28 Python
Ubuntu+python将nii图像保存成png格式
2019/07/18 Python
keras实现theano和tensorflow训练的模型相互转换
2020/06/19 Python
美国专业级皮肤病和spa品质护肤品的高级零售网站:SkinCareRx
2017/02/06 全球购物
Nike爱尔兰官方网站:Nike.com (IE)
2018/03/12 全球购物
美国办公用品折扣网站:Shoplet.com
2019/11/24 全球购物
质检部职责
2013/12/28 职场文书
2015年计划生育责任书
2015/05/08 职场文书
家长对学校的意见和建议
2015/06/03 职场文书