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

 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM