vue 实现超长文本截取,悬浮框提示
编程学习 2021-07-04 14:06www.dzhlxh.cn编程入门
这篇文章主要介绍了vue 实现超长文本截取,悬浮框提示,具有很好的参考价值,希望对大家有所帮助。一起跟随长沙网络推广过来看看吧
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 实现超长文本截取,悬浮框提示就是长沙网络推广分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持狼蚁SEO。
编程语言
- ThinkPad 笔记本如何调节LCD屏幕亮度
- Dreamweaver制作网页打开特效教程
- Win10 Mobile 10586升级后无限重启怎么办 硬重启帮您
- Win8系统提示音频设备有问题有一个或多个音频服
- Xbox One版Win10首个预览版9月份发布
- 如何在textarea文本输入区内实现换行
- Win10 Build 9901系统更新 预览版新版本下载
- McAfee Framework存在远程格式串处理漏洞
- Win10家庭版今日(7月30)正式在中国官方商城开卖
- Win10 Mobile预览版更新完10536.1000后才收到10536.100
- Win10 RS2更新了什么-Win10 RS2最终版本号1704首曝
- Windows7如何查看回收站对应的文件夹有哪些方法
- Win10让Charms栏回归桌面的方法教程
- 取消Windows XP系统开机启动画面的小技巧
- win8系统怎么下载安装USB百兆网卡?
- XP系统下磁盘空间变少了怎么办?XP系统磁盘空间