效果:
使用 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; }
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 [email protected] 举报,一经查实,本站将立刻删除。