当前位置: 首页 > article >正文

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

项目名称项目编号
1、XXXXX1111111111111111111
     1.1 XXXXX11111111111111222222222

如上表格中,实现项目名称字段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相似,但是会保留行末的空白符,并且允许在任何保留的空白字符后换行。


http://www.kler.cn/a/539977.html

相关文章:

  • 基于html2canvas实现将dom导出为图片,实现截屏效果
  • 线程池里面的execute 和 submit 方法有什么区别?
  • 云原生(五十四) | RDS数据导入与导出
  • Python Pandas(3):DataFrame
  • Django在终端创建项目(pycharm Windows)
  • UnityShader学习笔记——高级纹理
  • 掌握API和控制点(从Java到JNI接口)_39 JNI从C调用Java函数 02
  • 996引擎-问题处理:三职业改单职业
  • 【k8s应用管理】kubernetes pod资源控制管理(一)
  • MATLAB使用技巧之局部放大图的制作(二)
  • 通过Demo案例的形式弄懂Java中的设计模式
  • JMeter通过BeanShell如何对CSV文件的指定列追加数据
  • 智能理解 PPT 内容,快速生成讲解视频
  • 排错 -- 用React.js,Solidity,智能合约构建最新区块链应用
  • Pixel3XL 编译源码刷机教程
  • undetected-chromedriver 使用教程,指定浏览器驱动和浏览器版本
  • 运行npm install卡住不动的
  • 22.2、Apache安全分析与增强
  • 【数据结构】_栈与队列经典算法OJ:栈与队列的互相实现
  • 深度学习 语音合成
  • Java并发编程笔记
  • C++使用Json保存配置参数
  • 【计算机网络基础】ACL
  • 【Redis keys命令有什么问题?】
  • Android内存性能优化量化指标
  • 深度卷积神经网络实战海洋动物图像识别