elementUi——table表格中内容超过2行后,省略号...展示,鼠标悬停展示全部

elementUI、elementPlus的el-table都支持文字一行展示不全隐藏,悬停展示tooltip。但是UI设计会提出展示2行隐藏的的要求,我们便有这样的需求。项目中el-table往往会进行二次封装,所以下面的代码是在此基础上解决这个问题的。

1、首先是组件内代码

<template v-if="item.tooltip"><el-tooltip:content="item.tooltip.contentFun ? item.tooltip.contentFun(scope.row[item.prop]) : scope.row[item.prop]"placement="top":hide-after="0":show-after="100":raw-content="item.tooltip.rawContent || false"effect="dark"><div class="tooltip-content":style="{webkitLineClamp: item.tooltip.lines || 1,lineClamp: item.tooltip.lines || 1}">{{ scope.row[item.prop] || '--' }}</div></el-tooltip>
</template>
/*** {*   tooltip: { 气泡文字提示*     lines  展示几行后隐藏   数字类型*     rawContent   内容是否作为 HTML 字符串处理   Boolean类型*     contentFun   内容处理函数   Funciton(data){}*   }* }
*/
columns: {type: Array,default: () => []
},

我们通常会props接受columns来生成表格,这里如果列带有tooltip属性,则悬停展示全部文字。tooltip可以是一个Object或者Boolean。

Object支持参数:

  • lines  现在是支持2行,那么就可能支持3行、4行,所以这里直接设为参数
  • rawContent  内容是否作为HTML字符串处理,Boolean类型。如果内容折行带有<br>标签,是需要当HTML字符串处理的。
  • contentFun  我们的UI设计希望内容截取这行,所以这里接受内容的处理方法

3、父组件代码

[{label: 'xxxx',prop: 'xxxx',fixed: true,props: {minWidth: '170'},tooltip: {lines: 2,rawContent: true,contentFun: function (data) {const arr = data.split('(')return `${arr[0]}<br>(${arr[1]}`}}},
]

 我这里是需要截取折行,具体使用的时候根据需要去处理内容即可。

后面还想要扩展下如果没有隐藏就无需悬停展示全部,写了以后会更新上来。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/2950.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Golang | Leetcode Golang题解之第50题Pow(x,n)

题目&#xff1a; 题解&#xff1a; func myPow(x float64, n int) float64 {if n > 0 {return quickMul(x, n)}return 1.0 / quickMul(x, -n) }func quickMul(x float64, n int) float64 {if n 0 {return 1}y : quickMul(x, n/2)if n%2 0 {return y * y}return y * y * …

Redis 安装及配置教程(Windows)【安装】

文章目录 一、简介一、 下载1. GitHub 下载2. 其它渠道 二、 安装1. ZIP2. MSI 软件 / 环境安装及配置目录 一、简介 Redis 官网地址&#xff1a;https://redis.io/   Redis 源码地址&#xff1a;https://github.com/redis/redis   Redis 官网安装地址&#xff08;无Windo…

读天才与算法:人脑与AI的数学思维笔记09_分形

1. 分形 1.1. 1904年&#xff0c;瑞典数学家科赫&#xff08;Helge von Koch&#xff09;首次发表了雪花图案的结构——科赫曲线&#xff08;又称雪花曲线&#xff09;&#xff0c;它被认为是一种数学怪胎&#xff0c;一种奇怪的人工构造 1.1.1. 但实际上并不是&#xff0c;自…

4- 24

day02 1.100个英语单词 2.vp div3 不过有点小悲惨&#xff0c;第一题正常的直接看出来答案。第二题其实是map模拟&#xff0c;一直没有读懂题目的意思&#xff0c;题目给的序列是打乱的。找出最小的&#xff0c;讲原来的序列补全&#xff0c;如果mp中没有这个数字&#xff0c;…

Android 系统充电动画

效果 Android获取电池充电状态是否为快充可参考. Android_source/frameworks/base/packages/SystemUI/src/com/android/systemui/statusbar/phone/StatusBar.java private int lastBatteryStatus;private final BroadcastReceiver mBatteryChangedReceiver new BroadcastRece…

LeetCode 每日一题 ---- 【2739.总行驶距离】

LeetCode 每日一题 ---- 【2739.总行驶距离】 2739.总行驶距离解题方法&#xff1a;模拟 2739.总行驶距离 解题方法&#xff1a;模拟 根据题意进行模拟&#xff0c;主邮箱每减少 5 升油&#xff0c;汽车就可以行驶 10 公里&#xff0c;同时副油箱需要向主油箱注入 1 升油&…

如何正确卸载和重新安装 ESLint

在软件开发中&#xff0c;ESLint 是一款极具价值的代码质量和格式化工具&#xff0c;它帮助开发者保持代码的整洁和一致性。如果你需要从项目中卸载 ESLint 或重新安装它&#xff0c;这篇文章将为你提供详尽的指南。 卸载 ESLint 要从你的项目中完全移除 ESLint&#xff0c;你…

分组排序取第一条数据 SQL写法

1. 背景 在数据库查询过程中经常遇到需要分组排序查询第一条数据的情况。例如&#xff0c;在消息列表中需要展示每个联系人最近的一条信息。 2. 解决方案 目前我接触到的解决方案有两种&#xff0c;分别是开窗函数 row_number 和变量法。 2.1 开窗函数法 比较常用的解决方…

杰发科技AC7840——CAN通信简介(6)_监听模式

参考&#xff1a;http://t.csdnimg.cn/AFFPC 0. 简介 7840支持4种扩展模式&#xff0c;其中监听模式。 监听模式概念 作用: 这里写的用于诊断&#xff0c;实际上我还没有用到&#xff0c;不太理解为啥可以用作诊断。 我的理解是&#xff0c;在多个总线下&#xff0c;使用监听…

BUUCTF-MISC-10.LSB1

10.LSB1 题目&#xff1a;lsb隐写&#xff0c;stegsolve可以看到包含了一个PNG图片 使用stegsolve打开这个图片 由PNG文件头可以看出隐写内容为PNG文件&#xff0c;按save Bin键保存为PNG文件。 得到一张二维码图片&#xff0c;使用CQR扫一下

重启Nginx

1. 重启nginx命令&#xff1a; systemctl restart nginx service nginx restart ./nginx -s reload 2. 重启完查看进程&#xff1a; ps -ef | grep nginx

PostgreSQL中的临时表与永久表的区别,以及它们的最佳使用场景?

文章目录 临时表与永久表的区别临时表永久表区别总结 最佳使用场景临时表的使用场景永久表的使用场景 解决方案及示例代码临时表示例创建临时表插入数据查询数据 永久表示例创建永久表插入数据查询数据 总结 在PostgreSQL中&#xff0c;临时表和永久表都是用于存储数据的表结构…

Tensorflow小技巧01:检测本地Tensorflow的版本

前言&#xff1a; 以Pycharm为例&#xff0c;Windwos10系统&#xff0c;检测本地环境的Tensorflow的版本&#xff1a; 1 打开Pycharm窗口 2 在窗口中输入&#xff1a; pythonPython 3.9.5 (tags/v3.9.5:0a7dcbd, May 3 2021, 17:27:52) [MSC v.1928 64 bit (AMD64)] on win…

智慧文旅:引领旅游产业智慧升级的创新模式

一、智慧文旅是什么&#xff1f; 智慧文旅是指以当地特色文化为核心&#xff0c;借助现代科技手段&#xff0c;实现旅游景区全面智慧升级的旅游模式。在智慧文旅中&#xff0c;新一代信息网络技术和装备得到充分运用&#xff0c;文化旅游基础设施得到新建和改善&#xff0c;特…

python安装包使用国内镜像源

文章目录 1、国内镜像源2、命令3、pip加速安装4、其他命令参考文献 提示&#xff1a;以下是本篇文章正文内容&#xff0c;下面案例可供参考 1、国内镜像源 清华大学 &#xff1a;https://pypi.tuna.tsinghua.edu.cn/simple/ 阿里云&#xff1a;http://mirrors.aliyun.com/pyp…

【唯美情侣爱情表白纪念HTML单页】

唯美情侣爱情表白纪念HTML单页 效果图部分代码领取代码下期更新预报 效果图 整图 背景图 部分代码 index.html <!DOCTYPE html> <html lang"en"><head><meta http-equiv"Content-Type" content"text/html; charsetUTF-8"…

Java 基础:设计模式之工厂方法模式

工厂方法模式&#xff08;Factory Method Pattern&#xff09;是一种创建型设计模式&#xff0c;它提供了一个创建对象的通用接口&#xff0c;但将实际创建逻辑推迟到子类中实现。这种模式允许客户端使用抽象接口来创建特定类型的对象&#xff0c;而无需了解具体的实现细节。以…

valgrind,memcheck的使用

一&#xff0c;valgrind介绍 ​ valgrind是一个开源的&#xff0c;检测内存泄漏的工具&#xff0c;通常在linux下使用&#xff0c;除此之外&#xff0c;他还能检测内存管理错误&#xff0c;线程bug等错误。粗浅的来讲&#xff0c;valgrind由两部分构成&#xff0c;一部分用来模…

爬虫学习笔记-数美验证

测试网址&#xff1a;智能验证码体验_图片验证码_数美科技数美科技智能验证码在线体验&#xff0c;智能识别风险用户级别&#xff0c;自行切换智能验证码难度及类型&#xff0c;提供滑动、拼图、点选、数字、动态等多种智能验证码服务&#xff0c;精准拦截机器行为。https://ww…

R语言详解二

一&#xff0c;列表详解 创建一个列表 > myList<-list(id2,name"张三",age20) > myList $id [1] 2$name [1] "张三"$age [1] 20 获取第一个元素 > myList[[2]] [1] "张三" 获取第一个子列表 > myList[2] $name [1] "张…