element-ui使用el-table,保留字段前的空白
项目名称 | 项目编号 |
1、XXXXX | 1111111111111111111 |
1.1 XXXXX | 11111111111111222222222 |
如上表格中,实现项目名称字段1.1前空白的效果。
从JAVA返回的数据带有空白,即数据库中插入的数据带有空白。
原先写法:
<el-table>
<el-table-column label='项目' prop='project'>
</el-table-column>
</el-table>
修改以实现:
<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相似,但是会保留行末的空白符,并且允许在任何保留的空白字符后换行。