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;
    }

 

posted @   吴小明-  阅读(991)  评论(0编辑  收藏  举报
编辑推荐:
· 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如何判断元素出现在可视区
点击右上角即可分享
微信分享提示