替换:show-overflow-tooltip=“true“ ,使用插槽tooltip,达到内容可复制

news2024/12/25 15:04:42

原生的show-overflow-tooltip=“true” 不能满足条件,使用插槽自定义编辑;





旧code

<el-table-column prop="reason" label="原因" align="center" :show-overflow-tooltip="true" />
<el-table-column prop="params" label="参数" align="center" :show-overflow-tooltip="true" />





新code

<el-table-column prop="reason" label="原因" align="center">
  <template slot-scope="scope">
    <el-tooltip class="item" effect="dark" placement="top-start">
      <div slot="content">{{ scope.row.reason }}</div>
      <div style="max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
        {{ scope.row.reason }}
      </div>
    </el-tooltip>
  </template>
</el-table-column>
<el-table-column prop="params" label="参数" align="center">
  <template slot-scope="scope">
    <el-tooltip class="item" effect="dark" placement="top-start">
      <div slot="content">{{ scope.row.params }}</div>
      <div style="max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
        {{ scope.row.params }}
      </div>
    </el-tooltip>
  </template>
</el-table-column>

新css样式

.el-tooltip__popper {
  max-width: 500px !important; /* 你想要的宽度 */
}





效果

在这里插入图片描述




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

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

相关文章

构建实时银行应用程序:英国金融机构 Nationwide 为何选择 MongoDB Atlas

Nationwide Building Society 超过135年的互助合作 Nationwide Building Society&#xff08;以下简称“Nationwide”&#xff09; 是一家英国金融服务提供商&#xff0c;拥有超过 1500 万名会员&#xff0c;是全球最大的建房互助会。 Nationwide 的故事可以追溯到 1884 年&am…

ArcGIS Pro、ChatGPT、Python、InVEST等多技术融合的水文、生态、气候变化等地学领域科研及项目综合能力提升

在当前科学技术飞速发展的背景下&#xff0c;综合科研能力的提升对于推动各个领域的创新和发展具有重要的意义。在当前竞争激烈的科研环境中&#xff0c;掌握先进的数据处理与分析技术、深入了解前沿的研究领域、有效利用智能工具进行科研工作&#xff0c;已成为科研人员脱颖而…

html5——CSS3_文本样式属性

目录 字体样式 字体类型 字体大小 字体风格 字体的粗细 文本样式 文本颜色 排版文本段落 文本修饰和垂直对齐 文本阴影 字体样式 字体类型 p{font-family:Verdana,"楷体";} body{font-family: Times,"Times New Roman", "楷体";} …

CF1473E Minimum Path 题解(最短路,分层图最短路,较重要的套路)

题目描述&#xff1a; 题目 分析&#xff1a; 题目是要让我们求从 1 1 1 出发&#xff0c;到 i i i 的路径的最小权值。其中路径的权值定义为 路径上所有的边权和 减去最大边权 加上最小边权。这里有一个很秒的转化&#xff1a;可以把一条路径的权值理解为 必须将路径上的任…

【面试八股总结】单例模式实现详解

一、基本概念 单例设计模式是⼀种确保⼀个类只有⼀个实例&#xff0c;并提供⼀个全局访问点来访问该实例的创建模式。 关键概念&#xff1a; 一个私有构造函数&#xff1a;确保只能单例类自己创建实例一个私有静态变量&#xff1a;确保只有一个实例&#xff0c;私有静态变量用…

IDEA自动把接口中的方法注解填充到实现类中,勾选Copy JavaDoc即可

1. 目的 有一个Image接口类&#xff0c;接口中有getUserById方法&#xff0c;方法上有注释&#xff0c;实现类ImageImpl实现Image中的方法时&#xff0c;自动把接口中方法的注释也给带下来 具体案例如下 2. 接口类 有一个getUserById方法&#xff0c;方法上面有注释 3. 实现…

Java常用的API_02(正则表达式、爬虫)

Java正则表达式 七、正则表达式7.1 格式7.1.1 字符类注意字符类示例代码1例2 7.1.2 预定义字符预定义字符示例代码例2 7.1.3 区别总结 7.2 使用Pattern和Matcher类与直接使用String类的matches方法的区别。&#xff08;1&#xff09; 使用Pattern和Matcher类示例代码 &#xff…

JVM 之对象的结构与创建

1.对象的创建 1.1类加载 当Java 虚拟机遇到一条字节码 new 指令时&#xff0c;首先将去检查这个指令的参数是否能在常量池中定位到 一个类的符号引用&#xff0c;并且检查这个符号引用代表的类是否已被加载、解析和初始化过。如果没有&#xff0c;那 必须先执行相应的类加载过…

昇思MindSpore学习总结十五 ——基于Mindspore 实现BERT对话情绪识别

1、环境配置 根据实际情况&#xff0c;选择合适版本。 %%capture captured_output # 实验环境已经预装了mindspore2.2.14&#xff0c;如需更换mindspore版本&#xff0c;可更改下面mindspore的版本号 !pip uninstall mindspore -y !pip install -i https://pypi.mirrors.ustc…

用node.js写一个简单的图书管理界面——功能:添加,删除,修改数据

涉及到的模块&#xff1a; var fs require(‘fs’)——内置模块 var ejs require(‘ejs’)——第三方模块 var mysql require(‘mysql’)——第三方模块 var express require(‘express’)——第三方模块 var bodyParser require(‘body-parser’)——第三方中间件 需要…

华为HCIP Datacom H12-821 卷38

1.多选题 下面关于 BGP中的公认属性的描述&#xff0c;正确的是 A、公认必遵属性是所有BGP路由器都识别&#xff0c;且必须存在于Updata消息中心 B、BGP必须识别所有公认属性 C、公认属性分为公认必遵和可选过渡两种 D、公认任意属性是所有BGP造由器都可以识别&#xff0c…

217.贪心算法:加油站(力扣)

代码解决 class Solution { public:int canCompleteCircuit(vector<int>& gas, vector<int>& cost) {int curtotol 0; // 当前累积油量int tatol 0; // 总的油量减去总的花费油量int start 0; // 起始加油站的索引// 遍历所有加油站for (int i 0; i &…

【Android面试八股文】你说ARouter采用APT技术,那么谈一下你对APT技术的理解,还有那些框架是采用APT技术呀?JavaPoet

一、谈一下你对APT技术的理解 1.1 对APT技术的理解 APT(Annotation Processing Tool)是一种在编译期间处理注解的技术,它允许开发者在编译时扫描和处理 Java 源代码中的注解信息,生成额外的源代码、资源文件或者其他文件。以下是对APT技术的一些理解和应用场景: 工作原理…

期货量化交易客户端开源教学第九节——新用户注册

一、新用户注册界面设计&#xff1a; 注册时采用手机号注册&#xff0c;客户端发送新号注册申请由后台做审核&#xff0c;后台审核通过后向注册的手机号发送注册成功的消息。注册过的手机号不能再二次注册。 界面验证代码 private{ Private declarations }FVerf: AnsiString; …

【React Native】做了一个简约的雷达图组件

本文目录 【React Native】做了一个简约的雷达图组件获取组件实现思路用法示例简易用法自定义美化 结语 【React Native】做了一个简约的雷达图组件 最近在使用 react-native 中需要绘制雷达图&#xff0c;没有找到合适的小组件&#xff08;大的图表库未直接提供&#xff0c;需…

【活动预告】Apache IoTDB TsFile 智慧能源应用“上会”啦!

2024 年&#xff0c;站在中国数字经济产业升级和数据要素市场化建设的时代交汇点上&#xff0c;为进一步推动全球数据库产业进步&#xff0c;由中国通信标准化协会、大数据技术标准推进委员会主办的“2024 可信数据库发展大会”将于 2024 年 7 月 16-17 日&#xff0c;在北京朝…

Mac M1安装配置Hadoop+Flink SQL环境

Flink 1.18.1 Hadoop 3.4.0 一、准备工作 系统&#xff1a;Mac M1 (MacOS Sonoma 14.3.1) JDK&#xff1a;jdk1.8.0_381 &#xff08;注意&#xff1a;尽量一定要用JDK8&#xff0c;少用高版本&#xff09; Scala&#xff1a;2.12 JDK安装在本机的/opt/jdk1.8.0_381.jdk/C…

海外ASO:iOS与谷歌优化的相同点和区别

海外ASO是针对iOS的App Store和谷歌的Google Play这两个主要海外应用商店进行的优化过程&#xff0c;两个不同的平台需要采取不同的优化策略&#xff0c;以下是对iOS优化和谷歌优化的详细解析&#xff1a; 一、iOS优化&#xff08;App Store&#xff09; 1、关键词覆盖 选择关…

【公益案例展】中国电信安全大模型——锻造安全行业能量转化的高性能引擎...

‍ 电信安全公益案例 本项目案例由电信安全投递并参与数据猿与上海大数据联盟联合推出的 #榜样的力量# 《2024中国数智产业最具社会责任感企业》榜单/奖项评选。 大数据产业创新服务媒体 ——聚焦数据 改变商业 以GPT系列为代表的大模型技术&#xff0c;展现了人工智能技术与应…

Macos 远程登录 Ubuntu22.04 桌面

这里使用的桌面程序为 xfce, 而 gnome 桌面则测试失败。 1,安装 在ubuntu上&#xff0c;安装 vnc server与桌面程序xfce sudo apt install xfce4 xfce4-goodies tightvncserver 2&#xff0c;第一次启动和配置 $ tightvncserver :1 设置密码。 然后修改配置&#xff1a…