Element表格组件 el-table 标题行实现换行显示

Element表格组件 el-table 标题行实现换行显示

前言

需要尽量控制el-table展示更多的数据，避免出现横向滚动条。因此对于标题长但是内容短的数据，可以通过标题换行节约空间

效果

实现

<template>
<el-table-column :label="'综合\n评分'" header-align="center" align="center" width="60">  
  <template slot-scope="scope">  
   ······
  </template>  
</el-table-column>
</template>

<style scoped>  
::v-deep .el-table th>.cell {  
  white-space: pre-wrap;  
}  
</style>