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

最新推荐文章于 2025-06-04 15:16:41 发布

new_Petrichor

最新推荐文章于 2025-06-04 15:16:41 发布

阅读量1.6w

点赞数 12

CC 4.0 BY-SA版权

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/new_Petrichor/article/details/125537000

本文介绍了如何在Element UI的el-table组件中实现表头和单元格的换行。对于表头换行，利用`renderHeader`方法结合`split('/')`进行分隔；单元格换行则通过在数据中添加` `并设置样式`white-space: pre-wrap`实现。示例代码详细展示了这两种方法的具体应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、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>标签中添加样式，就能实现换行效果。