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