el-table表头换行、el-table-column单元格换行

一、el-table表头换行

<el-table 
  :data="tableList2" 
  border 
  style="width: 100%"
>
  <el-table-column :render-header="renderHeader" prop="level" label="这是一个/很长的表头" ></el-table-column>
  <el-table-column :render-header="renderHeader" prop="desc" label="不是一个/很短的表头" ></el-table-column>
</el-table>

methods: {
	renderheader(h, { column, $index }) {
	  return h('span', {}, [
	    h('span', {}, column.label.split('/')[0]),
	    h('br'),
	    h('span', {}, column.label.split('/')[1])
	  ]);
	}
}

总结：split('/') 这里的 / 就是表头label里加的分隔符标志，当然你也可以替换为其他分隔符~

二、el-table-column 单元格换行

<el-card style="width:auto" shadow="hover">
 <div slot="header">
   <span style="font-weight: bold">标题一</span>
 </div>
 <el-table 
   :data="tableList" 
   border 
   style = "width: 100%"
 >
   <el-table-column  prop="column1" label="列1" ></el-table-column>
   <el-table-column  prop="column2" label="列2" ></el-table-column>
   <el-table-column  prop="column3" label="列3" >
     <el-table-column  prop="column4" label="列3.1" ></el-table-column>
     <el-table-column  prop="column5" label="列3.2" ></el-table-column>
     <el-table-column  prop="column6" label="列3.3" ></el-table-column>
     <el-table-column  prop="column7" label="列3.4" ></el-table-column>
   </el-table-column>
 </el-table>
</el-card>

// 注意： \n 要写
tableList: [
	{
	  column1: '6', 
	  column2:'这是描述这是描述这是描述', 
	  column3:'这是描述这是描述这是描述', 
	  column4:'这是描述这是描述这是描述这是描述这是描述这是描述', 
	  column5:'1.这是描述这是描述这是描述这是描述这是描述这是描述  \n 2.这是描述这是描述这是描述这是描述这是描述这是描述', 
	  column6:'1.这是描述这是描述这是描述这是描述这是描述这是描述 \n 2.这是描述这是描述这是描述这是描述这是描述这是描述', 
	},
	{
	  column1: '5', 
	  column2:'这是描述这是描述这是描述', 
	  column3:'这是描述这是描述这是描述', 
	  column4:'这是描述这是描述这是描述这是描述这是描述这是描述', 
	  column5:'1.这是描述这是描述这是描述 \n 2.这是描述这是描述这是描述', 
	  column6:'1.这是描述这是描述这是描述 \n 2.这是描述这是描述这是描述', 
	},
],

<style>
.el-table .cell {
  white-space: pre-wrap;   /*这是重点。文本换行*/
}
</style>

总结：el-table-column 单元格内换行时，单独加 \n 并且前后加空格不生效，也试了加style="white-space: pre-wrap" 也不生效。于是在<style>标签中添加样式，就能实现换行效果。