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 相关文章推荐
做网页的一些技巧(续)
Feb 01 Javascript
js 数组实现一个类似ruby的迭代器
Oct 27 Javascript
JS 获取浏览器和屏幕宽高等信息代码
Mar 31 Javascript
微信小程序 location API实例详解
Oct 02 Javascript
JS控件bootstrap suggest plugin使用方法详解
Mar 25 Javascript
vue实现选项卡及选项卡切换效果
Apr 24 Javascript
详解Vue开发微信H5微信分享签名失败问题解决方案
Aug 09 Javascript
利用Dectorator分模块存储Vuex状态的实现
Feb 05 Javascript
记一次Vue.js混入mixin的使用(分权限管理页面)
Apr 17 Javascript
微信小程序实现录音时的麦克风动画效果实例
May 18 Javascript
vue设置动态请求地址的例子
Nov 01 Javascript
vue实现书本翻页动画效果实例详解
Apr 08 Vue.js
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
PHP中使用mktime获取时间戳的一个黑色幽默分析
2012/05/31 PHP
PHP数组无限分级数据的层级化处理代码
2012/12/29 PHP
YII实现分页的方法
2014/07/09 PHP
php数组排序usort、uksort与sort函数用法
2014/11/17 PHP
写一段简单的PHP建立文件夹代码
2015/01/06 PHP
Yii框架通过请求组件处理get,post请求的方法分析
2019/09/03 PHP
基于JQUERY的两个ListBox子项互相调整的实现代码
2011/05/07 Javascript
jquery星级插件、支持页面中多次使用
2012/03/25 Javascript
Jquery submit()无法提交问题
2013/04/21 Javascript
原生js实现复制对象、扩展对象 类似jquery中的extend()方法
2014/08/30 Javascript
基于jQuery实现文本框缩放以及上下移动功能
2014/11/24 Javascript
IE下使用jQuery重置iframe地址时内存泄露问题解决办法
2015/02/05 Javascript
Javascript中setTimeOut和setInterval的定时器用法
2015/06/12 Javascript
JS正则验证多个邮箱完整实例【邮箱用分号隔开】
2017/04/19 Javascript
vue+element实现表单校验功能
2019/05/20 Javascript
vue实现抖音时间转盘
2019/09/08 Javascript
vue中改变滚动条样式的方法
2020/03/03 Javascript
[04:37]DOTA2英雄梦之声Vol20发条
2014/06/20 DOTA
Python编写电话薄实现增删改查功能
2016/05/07 Python
使用python绘制常用的图表
2016/08/27 Python
Python进程间通信Queue实例解析
2018/01/25 Python
python生成ppt的方法
2018/06/07 Python
PyQt5固定窗口大小的方法
2019/06/18 Python
Python OrderedDict字典排序方法详解
2020/05/21 Python
keras和tensorflow使用fit_generator 批次训练操作
2020/07/03 Python
利用CSS3实现圆角的outline效果的教程
2015/06/05 HTML / CSS
canvas 实现 github404动态效果的示例代码
2017/11/15 HTML / CSS
h5使用canvas画布实现手势解锁
2019/01/04 HTML / CSS
国家地理在线商店:Shop National Geographic
2018/06/30 全球购物
blueseventy官网:铁人三项和比赛泳衣
2021/02/06 全球购物
估算杭州有多少软件工程师
2015/08/11 面试题
会计顶岗实习心得
2014/01/25 职场文书
2014年卫生监督工作总结
2014/12/09 职场文书
学生逃课检讨书
2015/02/17 职场文书
收银员岗位职责范本
2015/04/07 职场文书
FP-growth算法发现频繁项集——构建FP树
2021/06/24 Python