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 相关文章推荐
JS动画效果代码3
Apr 03 Javascript
12个非常有创意的JavaScript小游戏
Mar 18 Javascript
由Javascript实现的页面日历
Nov 04 Javascript
javascript实现的一个带下拉框功能的文本框
May 08 Javascript
JavaScript中的逻辑判断符&amp;&amp;、||与!介绍
Dec 31 Javascript
Javascript核心读书有感之词法结构
Feb 01 Javascript
基于jQuery+PHP+Mysql实现在线拍照和在线浏览照片
Sep 06 Javascript
jquery 键盘事件的使用方法详解
Sep 13 jQuery
JavaScript如何获取到导航条中HTTP信息
Oct 10 Javascript
jQuery实现的页面弹幕效果【测试可用】
Aug 17 jQuery
vue强制刷新组件的方法示例
Feb 28 Javascript
基于Vue中使用节流Lodash throttle详解
Oct 30 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
php实现mysql同步的实现方法
2009/10/21 PHP
解析WordPress中控制用户登陆和判断用户登陆的PHP函数
2016/03/01 PHP
ThinkPHP防止重复提交表单的方法实例分析
2018/05/10 PHP
php微信公众号开发之关键词回复
2018/10/20 PHP
jQuery插件-jRating评分插件源码分析及使用方法
2012/12/28 Javascript
Javascript中匿名函数的多种调用方式总结
2013/12/06 Javascript
JavaScript 实现鼠标拖动元素实例代码
2014/02/24 Javascript
Javascript中的Array数组对象详谈
2014/03/03 Javascript
7个有用的jQuery代码片段分享
2015/05/19 Javascript
JS根据key值获取URL中的参数值及把URL的参数转换成json对象
2015/08/26 Javascript
在Javascript操作JSON对象,增加 删除 修改的简单实现
2016/06/02 Javascript
JS调用某段SQL语句的方法
2016/10/20 Javascript
jQuery Validate验证表单时多个name相同的元素只验证第一个的解决方法
2016/12/24 Javascript
js如何编写简单的ajax方法库
2017/08/02 Javascript
用js实现before和after伪类的样式修改的示例代码
2017/09/07 Javascript
NW.js 简介与使用方法
2018/02/01 Javascript
关于HTML5的data-*自定义属性的总结
2018/05/05 Javascript
使用Angular 6创建各种动画效果的方法
2018/10/10 Javascript
解决微信小程序中的滚动穿透问题
2019/09/16 Javascript
微信小程序获取复选框全选反选选中的值(实例代码)
2019/12/17 Javascript
Postman动态获取返回值过程详解
2020/06/30 Javascript
node.js 如何监视文件变化
2020/09/01 Javascript
nuxt 服务器渲染动态设置 title和seo关键字的操作
2020/11/05 Javascript
python logging 日志轮转文件不删除问题的解决方法
2016/08/02 Python
Python2随机数列生成器简单实例
2017/09/04 Python
pandas apply 函数 实现多进程的示例讲解
2018/04/20 Python
pandas的to_datetime时间转换使用及学习心得
2019/08/11 Python
希尔顿酒店官方网站:Hilton Hotels
2017/06/01 全球购物
介绍一下gcc特性
2012/01/20 面试题
部队学习十八大感言
2014/01/11 职场文书
文明倡议书范文
2014/04/15 职场文书
诚信承诺书模板
2014/05/26 职场文书
2015年污水处理厂工作总结
2015/05/26 职场文书
初一年级组工作总结
2015/08/12 职场文书
晶体管单管来复再生式收音机
2021/04/22 无线电
react 项目中引入图片的几种方式
2021/06/02 Javascript