当前位置: 首页 > news >正文

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

原生的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.lryc.cn/news/398746.html

相关文章:

  • 219.贪心算法:柠檬水找零(力扣)
  • 通过 Azure OpenAI 服务使用 GPT-35-Turbo and GPT-4(win版)
  • MySQL 面试真题(带答案)
  • 《A++ 敏捷开发》- 10 二八原则
  • Spring Boot 框架知识汇总
  • 国产麒麟、uos在线编辑word文件并控制编辑区域(局部编辑)
  • Go:基本变量与数据类型
  • 计算器原生js
  • 怎样将aac转换mp3格式?推荐四个aac转MP3的方法
  • MongoDB - 查询操作符:比较查询、逻辑查询、元素查询、数组查询
  • html5——CSS高级选择器
  • Python-数据爬取(爬虫)
  • 虚幻引擎ue5如何调节物体锚点
  • Xcode持续集成之道:自动化构建与部署的精粹
  • Java高频面试基础知识点整理13
  • css画半圆画圆弧
  • LeetCode HOT100(四)字串
  • uniapp引入 uview( HBuilder 和 npm 两种安装方式) #按需引入
  • 使用uni-app和Golang开发影音类小程序
  • 基于Go1.19的站点模板爬虫详细介绍
  • 永恒之蓝:一场网络风暴的启示
  • AI绘画:艺术与科技的交融,创新浪潮与无限可能
  • 医疗健康信息的安全挑战与隐私保护最佳实践
  • 《C++并发编程实战》笔记(一、二)
  • 【日常bug记录】el-checkbox 绑定对象数组
  • 单元测试Mockito笔记
  • 基于SpringBoot+VueJS+微信小程序技术的图书森林共享小程序设计与实现:7000字论文+源代码参考
  • GitHub连接超时问题 Recv failure: Connection was reset
  • 浅谈PostCSS
  • GCN、GIN