首页 > 其他 > 详细

elementUI表格设置单元格文字hover样式

时间:2021-07-27 20:35:15      阅读:34      评论:0      收藏:0      [点我收藏+]

效果:

技术分享图片

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

 

elementUI表格设置单元格文字hover样式

原文:https://www.cnblogs.com/wuqilang/p/15067299.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!