el-table 表头过长换行改为自动截断添加省略号

做前端的时候碰到element ui table组件表头文字太多,自动换行导致表头宽度增加。

看了一些文章,基本都是添加render-header来解决这个问题。

但实际上这个属性已经不被推荐使用了,并且现在用 template + css已经可以很简单的解决这问题了。

<el-table-column>
<template v-slot:header>
<span class=”header-ellipsis“>LongLongLongLongLongLongText</span>
</template>
</el-table-column>

.header-ellipsis {
text-overflow: ellipsis;
white-space: nowrap;
}

Leave a Comment