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

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.lryc.cn/news/533631.html

相关文章:

  • kamailio中路由模块汇总
  • 如何使用 DeepSeek 搭建本地知识库
  • 网络HTTP详细讲解
  • 《Origin画百图》之边际分布曲线图
  • 【Milvus】向量数据库pymilvus使用教程
  • React 生命周期函数详解
  • 第 26 场 蓝桥入门赛
  • 组合(力扣77)
  • 网络工程师 (22)网络协议
  • Linux之文件IO前世今生
  • 如何在Windows中配置MySQL?
  • Kafka 入门与实战
  • 数学知识学习1
  • 【AI日记】25.02.08
  • Lecture8 | LPV VXGI SSAO SSDO
  • Java中实现定时锁屏的功能(可以指定时间执行)
  • Java集合List详解(带脑图)
  • [实验日志] VS Code 连接服务器上的 Python 解释器进行远程调试
  • (14)gdb 笔记(7):以日志记录的方式来调试多进程多线程程序,linux 命令 tail -f 实时跟踪日志
  • Sentinel的安装和做限流的使用
  • 四柱预测学
  • 【个人开发】macbook m1 Lora微调qwen大模型
  • sqli-labs靶场实录(二): Advanced Injections
  • Linux系统 环境变量
  • 机器学习-线性回归(最大似然估计)
  • 【信息系统项目管理师-案例真题】2017上半年案例分析答案和详解
  • CSP晋级组比赛生成文件夹与文件通用代码Python
  • 正则表达式进阶(二)——零宽断言详解:\b \B \K \z \A
  • Android 中实现 PDF 预览三种方式
  • 尚硅谷课程【笔记】——大数据之Zookeeper【二】