elementUI表格设置单元格文字hover样式
效果:
使用 show-overflow-tooltip 无法设置hover状态时的样式,改用 el-tooltip
1、
<el-table-column label="核心使用场景" min-width='300'> <template scope="scope"> <el-tooltip effect="dark" placement="top"> <div v-html="scope.row.useScene" slot="content" style="{width:'220px';white-space:pre-line;word-break:break-all;}"></div> <div class="oneLine">{{scope.row.useScene}}</div> </el-tooltip> </template> </el-table-column>
2、
async getList() { let res = await getList(this.listQuery) if (res.code === 200) { let { list, recordcount } = res.data list.forEach((item) => { item.updatetime = parseTime( Number(item.updatetime + '000'), '{y}-{m}-{d} {h}:{i}:{s}' ) item.useScene = item.casescenelist .map((item) => `${item.typename}:${item.content}\n\n`) .join('') .slice(0, -2) }) this.tableData = list this.total = recordcount } },
3、
.oneLine { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
分类:
vue
, element-ui
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· 10年+ .NET Coder 心语 ── 封装的思维:从隐藏、稳定开始理解其本质意义
· 【设计模式】告别冗长if-else语句:使用策略模式优化代码结构
· 提示词工程——AI应用必不可少的技术
· 字符编码:从基础到乱码解决
· 地球OL攻略 —— 某应届生求职总结
2019-07-27 异步处理的方式
2019-07-27 ES5新增的数组方法
2019-07-27 ES5对象新增的方法
2019-07-27 谈谈对文档碎片的理解
2019-07-27 原生js如何判断元素出现在可视区