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

效果:

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

 

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

上一篇:vue 路由


下一篇:抽象类