背景
有些单元个中会有比较长的内容,如果使用默认格式,会导致单元格的高度比较怪异,需要将超长的内容进行省略。
当前效果:
优化效果:
优化代码:
在内容多的单元格增加下面代码
<el-table-column
prop="requestHeader"
label="requestHeader">
<-- 增加的内容 -->
<template #default="scope">
<div class="cell-content">
{{ scope.row.requestHeader }}
</div>
</template>
<-- 增加的内容 -->
</el-table-column>
<style scoped>
.cell-content {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
</style>