el-table中的:label使用变量换行

最新推荐文章于 2024-07-19 09:55:53 发布

weixin_50750933

最新推荐文章于 2024-07-19 09:55:53 发布

阅读量1.1k

点赞数

文章标签： css html vue.js

本文链接：https://blog.csdn.net/weixin_50750933/article/details/119903391

版权

本文介绍了如何在Vue Element UI的el-table组件中处理表头label的换行问题，提供了三种方法：通过在label中直接添加，设置CSS的white-space属性，以及使用render-header结合自定义渲染函数。每种方法都有对应的实现代码和效果展示，包括处理p标签外边距的CSS样式。这些解决方案有助于优化表格布局，使其在不同场景下适应性更强。

摘要由CSDN通过智能技术生成

el-table中的label换行问题（重点white-space）

依赖CSS的方法

1.label中增加 \n
<el-table-column prop="name" :label="'姓名\nname'" min-width="100"></el-table-column>

2.设置white-space样式
.el-table .cell {
　　white-space: pre-line;
}

3.效果图
在这里插入图片描述

绑定render-header处理写死字符串

1.label中增加空格，绑定render-header方法

<el-table-column :render-header="renderHeader" prop="capacity" label="库容 (亿m³)" min-width="90" align="center" />

2.renderHeader方法
renderHeader(h, {column}) {
  let header = column.label.split(' ');
  return [h('p', [
    h('p', {}, header[0]),
    h('span', {}, header[1])
  ])];
}

p标签有外边距样式需要取消
el.table.column .cell .p
{
	pardding:0px;
}

3.效果图：
在这里插入图片描述

绑定render-header处理变量字符串

<el-table-column  prop="capacity" :label="handleLabel(sotreUnit)" min-width="90" align="center" />


2.handleLabel方法,sotreUnit的换行符被识别为字符串了，:label不支持InnerHtml的方式赋值。手动转换"\\n”为“\n"
data(){
	return {
		sotreUnit: "库容\n(亿m³)",
	}
}
computed: {
	handleLabel(){
		return (val, replaceValue） => {
			if(replaceValue != null && replaceValue == ""）{
				return val.replaceAll("\\n", replaceValue);
			} else {
				//return val.replaceAll(/\\n/gm, "\n");
				return val.replaceAll("\\n", "\n");
			}
		}
	}
}

p标签有外边距样式需要取消
el.table.column .cell .p
{
	pardding:0px;
}