zoukankan      html  css  js  c++  java
  • 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="{'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}
    
    `)
                .join('')
                .slice(0, -2)
            })
            this.tableData = list
            this.total = recordcount
          }
        },

    3、

        .oneLine {
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
  • 相关阅读:
    第三次博客作业
    多项式求导--三次作业小结
    Python实现批量修改文件名
    汉字编程 —— 第一次个人编程作业
    PAT甲级代码仓库
    谈谈自己 —— 第一次博客作业
    爬取豆瓣网图书TOP250的信息
    HDU1862
    HDU1408
    HDU1302
  • 原文地址:https://www.cnblogs.com/wuqilang/p/15067299.html
Copyright © 2011-2022 走看看