element-ui使用el-table，保留字段前的空白

Goodbaibaibai2025-02-09 18:49

|-----------|-------------------------|
| 项目名称 | 项目编号 |
| 1、XXXXX | 1111111111111111111 |
| 1.1 XXXXX | 11111111111111222222222 |

如上表格中，实现项目名称字段1.1前空白的效果。

从JAVA返回的数据带有空白，即数据库中插入的数据带有空白。

原先写法：

html 复制代码

<el-table>
    <el-table-column label='项目' prop='project'>
    </el-table-column>
</el-table>

修改以实现：

html 复制代码

<el-table>
    <el-table-column label='项目'>
        <template slot -scope="scope">
            <div style="white-space: pre-wrap">{
  
  {scope.row.project}}</div>
        </template>
    </el-table-column>
</el-table>

在CSS中，white-space 属性用于控制如何处理元素内的空白字符。这包括空格、制表符、换行符等。white-space属性的设置会影响元素内容的显示方式，特别是在文本换行和空白字符的处理上。

white-space属性可以设置为以下几个值：

normal：这是默认值。连续的空白符会被合并，换行符会被视为普通的空白符来处理。文本会在必要时自动换行。
nowrap ：与normal 相似，连续的空白符会被合并，但是会阻止文本自动换行。只有在遇到*<br>*标签时文本才会换行。
pre ：连续的空白符会被保留，文本只会在遇到换行符或*<br>*元素时换行。
pre-wrap ：连续的空白符会被保留，文本会在遇到换行符、*<br>*元素或必要时自动换行。
pre-line ：连续的空白符会被合并，但是会保留换行符。文本会在遇到换行符、*<br>*元素或必要时自动换行。
break-spaces ：与pre-wrap相似，但是会保留行末的空白符，并且允许在任何保留的空白字符后换行。