在处理树形结构数据时，前端开发者通常会直接将后端返回的节点名称绑定到El-tree组件的label属性上。然而，当节点名称中包含连续的空格、制表符等空白字符时，页面渲染出来的结果往往会让人大跌眼镜：原本用于对齐或表示层级的多个连续空格，在页面上只剩下一个，甚至完全消失。这种文本格式被破坏的问题，不仅影响界面的美观度，更可能导致数据展示的歧义。
一、探究El-tree空格丢失的根本原因
要弄明白为什么空格会丢失，首先需要从HTML的基础渲染规则说起。根据W3C标准，HTML源码中的连续空白字符（包括空格、制表符、换行符等）在浏览器渲染时会被合并为一个单一的空格。这种机制被称为空白符折叠。El-tree组件在渲染节点时，默认会将节点名称直接插入到对应的DOM元素中，通常是放在一个<span>或<div>标签内。由于浏览器的默认行为，这些连续的空格自然无法幸免。
其次，Vue的模板编译机制也对此有一定影响。在Vue的模板中，如果直接使用双花括号插值的方式输出包含连续空格的变量，Vue在编译模板时也会按照HTML的规范对空白符进行压缩处理。虽然El-tree内部对节点的渲染做了一定封装，但如果仅仅是简单地将文本内容传递给原生的HTML元素，而没有进行特殊的样式或转义处理，就无法逃脱浏览器的默认渲染规则。
此外，很多开发者会误以为是El-tree组件在处理数据时主动去除了空格，实际上组件本身并没有对传入的数据进行字符串替换操作。问题的核心始终在于浏览器如何解析和显示这些包含空白字符的文本节点。理解了这一点，我们就能明白，解决这个问题的关键不在于修改数据源，而在于改变文本在页面上的呈现方式。
二、利用CSS的white-space属性快速修复
最直接且侵入性最小的解决方案是使用CSS的white-space属性。该属性用于设置如何处理元素内的空白符。默认情况下，元素的white-space属性值为normal，这正是导致连续空格被折叠的罪魁祸首。我们可以通过覆盖El-tree节点容器的样式，将其修改为pre或pre-wrap，从而强制浏览器保留文本中的空白字符。
在具体实施时，我们需要定位到El-tree渲染节点文本的class名称。通常情况下，Element UI的树节点文本会被包裹在带有特定类名的元素中。我们可以通过浏览器的开发者工具检查元素，找到对应的类名，然后在全局样式表或使用深度选择器进行样式覆盖。
/* 修改 El-tree 节点文本的 white-space 属性 */
.el-tree-node__label {
white-space: pre-wrap;
/* pre-wrap 会保留空白符序列，但是允许正常换行 */
}
/* 如果不需要自动换行，可以使用 pre */
.custom-tree-class .el-tree-node__label {
white-space: pre;
}
使用CSS方案的优点在于简单快捷，不需要修改任何组件逻辑代码，对现有项目的破坏性极小。然而，它也有一定的局限性。如果树节点的文本非常长且包含大量空格，使用pre可能会导致文本溢出容器而不自动换行，影响整体布局。此时必须谨慎选择pre-wrap，并结合word-break等其他CSS属性来控制文本的换行行为，确保在保留空格的同时不会破坏页面的整体结构。
三、通过自定义渲染函数精准控制节点内容
当CSS样式无法满足复杂的业务需求，或者需要在节点文本中混合渲染其他元素时，使用El-tree提供的自定义渲染功能是更优的选择。El-tree允许开发者通过render-content属性或使用scoped slot插槽来自定义节点的内容渲染。通过这种方式，我们可以完全接管节点文本的DOM结构，从而精确控制空格的显示。
在Vue 2.x版本中，通常使用render-content属性传入一个渲染函数。在渲染函数中，我们可以将包含空格的文本拆分，或者直接使用带有white-space: pre样式的标签来包裹文本。而在Vue 3.x配合Element Plus的环境中，更推荐使用插槽的方式，这种方式更加符合Vue的单文件组件风格，可读性也更强。
<template>
<el-tree :data="treeData" :props="defaultProps">
<template #default="{ node, data }">
<span class="custom-tree-node">
<span style="white-space: pre-wrap;">{{ node.label }}</span>
</span>
</template>
</el-tree>
</template>
<script>
export default {
data() {
return {
treeData: [{
label: '一级节点 包含连续空格',
children: [{
label: '二级节点 也有空格'
}]
}],
defaultProps: {
children: 'children',
label: 'label'
}
};
}
};
</script>
通过自定义插槽，我们不仅可以在内联样式中直接指定white-space属性，还可以对文本进行更复杂的处理。例如，如果空格具有特殊的业务含义，我们可以将连续空格替换为特定数量的不可见占位符，或者将文本按空格分割后分别渲染在不同的子元素中。这种方案的灵活性极高，能够应对各种极端的文本格式化需求。不过，自定义渲染会增加一定的组件开销，在节点数量极其庞大的树结构中，可能会对页面的渲染性能产生轻微影响，需要开发者在功能与性能之间做好权衡。
四、数据预处理与HTML实体替换方案
除了在渲染层面解决问题，我们还可以从数据源入手，对即将展示的文本进行预处理。既然浏览器会折叠连续的空格，我们可以将普通的空格字符替换为HTML实体或者不换行空格。这种方法在早期的Web开发中非常常见，对于El-tree组件同样适用。
具体做法是在将数据绑定到El-tree之前，遍历树形数据，将每个节点的label属性中的空格替换为 。需要注意的是，如果直接在Vue模板中输出 字符串，它会被当作普通文本显示，而不是被解析为HTML实体。因此，我们需要使用v-html指令或者通过render函数的domProps来设置innerHTML。
// 数据预处理函数
function formatTreeData(data) {
return data.map(node => {
// 将连续两个以上的空格替换为对应数量的
// 注意：这里替换为字符串 ' '
const formattedLabel = node.label.replace(/ /g, ' ');
return {
...node,
label: formattedLabel
};
});
}
// 在组件中使用
this.treeData = formatTreeData(rawData);
虽然数据预处理方案能够从根本上解决空格显示问题，但它引入了额外的数据处理逻辑，增加了代码的复杂度。同时，大量使用 可能会导致文本在视觉上难以换行，因为浏览器会将连续的 视为一个不可断开的单词。因此，这种方案更适合于节点文本较短且空格数量固定的场景。在实际项目中，开发者需要根据具体的业务场景和性能要求，在CSS方案、自定义渲染方案和数据处理方案之间做出最合适的选择。