elementUI el-table 表格头数据换行

最新推荐文章于 2025-07-08 23:56:51 发布

转载最新推荐文章于 2025-07-08 23:56:51 发布 · 2.2k 阅读

1 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/dyy-dida/p/11276530.html

文章标签：

#javascript #ui #前端 #ViewUI

本文详细介绍了如何在Element UI的el-table组件中实现表格头数据的换行显示，通过CSS样式设置white-space属性为pre-line，保留换行符，同时提供了两种实现方式：直接在HTML标签中使用转义字符和在tableColums数组中设置label属性。

/*实现表格头数据换行*/
.el-table .cell {
    /*text-align: center;*/
    white-space: pre-line;/*保留换行符*/
}

　　写法：

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　<el-table-column v-for="(item,index) in tableColums" :key="index"
                                                                     :prop="item.prop"
                                                                     :label="item.label"
                                                                     :width="item.width"
                                                                     align="center"
                                                                     show-overflow-tooltip>
                                                    </el-table-column>

<el-table-column prop="name" :label="'数据\n单位'" align="center" show-overflow-tooltip></el-table-column>//

第一种写法

tableColums:[{prop:'name',label:'数据\n单位'}]//

第二种写法

转载于:https://www.cnblogs.com/dyy-dida/p/11276530.html