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

Element table组件内容\n换行解决办法

项目使用<el-table>组件

 
  1. <el-table :data="warnings" :row-class-name="highlightRow" v-loading="isLoading">

  2. <el-table-column label="ID" prop="id"/>

  3. <el-table-column label="时间" prop="time"/>

  4. <el-table-column label="身份证号" prop="idCardNo" width="300"/>

  5. <el-table-column label="车牌号" prop="busno"/>

  6. <el-table-column label="车站" prop="busstop"/>

  7. <el-table-column label="相似度" prop="sim"/>

  8. <el-table-column label="详情">

  9. <template slot-scope="scope">

  10. <el-button @click="detail(scope.row)" type="primary" size="mini" plain>查看

  11. </el-button>

  12. </template>

  13. </el-table-column>

  14. <el-table-column label="确认时间" prop="acktime" :formatter="timeFormatter"/>

  15. </el-table>

由于<el-table>中的数据源是直接给了一个对象,所以table中的每一个cell用户都不用管,要使身份证号  这一列内容以\n换行。首先后台传数据要在内容需要换行处拼接"\n"字符串。

 1.直接将warnings数据源中的每一个元素的对象中的字段用split分割,再用join拼接\n换行符之后,希望它能够起作用。但是实际F12 DOM树中的文字看到是进行了换行,但是el-tablecell纹丝不动。

2.使用<pre>标签的内容自动换行。<pre> 元素可定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。

3.先尝试使用:word-wrap: break-word;将内容自动换行,IE,OP,Chrome,Safari都可以,FF就悲剧了。

4.查看了pre的浏览器默认样式中真正起作用的是white-space: pre这一条。

看看white-space的值:

    normal 默认。空白会被浏览器忽略。
    pre 空白会被浏览器保留。其行为方式类似 HTML 中的<pre> 标签。
    nowrap 文本不会换行,文本会在在同一行上继续,直到遇到 <br>标签为止。
    pre-wrap 保留空白符序列,但是正常地进行换行。
    pre-line 合并空白符序列,但是保留换行符。
    inherit 规定应该从父元素继承 white-space 属性的值。

按照我的需求,我希望它保留换行符。于是添加了样式:

 
  1. .el-table .cell {

  2. white-space: pre-line;

  3. }

相关文章:

  • Day14 文件操作
  • 【百面成神】Redis基础11问,你能坚持到第几问
  • 配置IDEA自带Maven插件的镜像源
  • 简介虚拟地址空间:保障进程间独立性的机制
  • 【剑指offer】旋转数组的最小数字
  • 手写一个简单的RPC框架
  • 如何创建和编写项目管理计划?
  • 算法设计与分析 实验五 贪心算法
  • 正式环境关闭swagger
  • 动态内存的开辟
  • 【分布式版本控制系统Git】| IDEA 集成 Git 、IDEA 集成 GitHub
  • C语言指针链表
  • 全网最完整,接口测试总结彻底打通接口自动化大门,看这篇就够了......
  • 【JVM虚拟机面试宝典】JVM的内存结构是怎么样的?在JVM中会发生内存溢出的区域有那些?— day06
  • C++ string类
  • 2019.2.20 c++ 知识梳理
  • AngularJS指令开发(1)——参数详解
  • Apache Zeppelin在Apache Trafodion上的可视化
  • java中具有继承关系的类及其对象初始化顺序
  • JS变量作用域
  • mac修复ab及siege安装
  • mysql 数据库四种事务隔离级别
  • Python利用正则抓取网页内容保存到本地
  • Quartz实现数据同步 | 从0开始构建SpringCloud微服务(3)
  • SOFAMosn配置模型
  • SQLServer之创建数据库快照
  • 关于springcloud Gateway中的限流
  • 基于web的全景—— Pannellum小试
  • 简析gRPC client 连接管理
  • 利用jquery编写加法运算验证码
  • 写代码的正确姿势
  • 一个普通的 5 年iOS开发者的自我总结,以及5年开发经历和感想!
  • Play Store发现SimBad恶意软件,1.5亿Android用户成受害者 ...
  • !$boo在php中什么意思,php前戏
  • # 手柄编程_北通阿修罗3动手评:一款兼具功能、操控性的电竞手柄
  • #!/usr/bin/python与#!/usr/bin/env python的区别
  • #laravel 通过手动安装依赖PHPExcel#
  • (10)STL算法之搜索(二) 二分查找
  • (delphi11最新学习资料) Object Pascal 学习笔记---第8章第5节(封闭类和Final方法)
  • (Java实习生)每日10道面试题打卡——JavaWeb篇
  • (三)c52学习之旅-点亮LED灯
  • (一)pytest自动化测试框架之生成测试报告(mac系统)
  • (译)计算距离、方位和更多经纬度之间的点
  • (转)拼包函数及网络封包的异常处理(含代码)
  • (转)树状数组
  • .NET delegate 委托 、 Event 事件
  • .NET Micro Framework初体验
  • .Net Web项目创建比较不错的参考文章
  • @LoadBalanced 和 @RefreshScope 同时使用,负载均衡失效分析
  • @Mapper作用
  • @transactional 方法执行完再commit_当@Transactional遇到@CacheEvict,你的代码是不是有bug!...
  • [2023年]-hadoop面试真题(一)
  • [5] CUDA线程调用与存储器架构
  • [AHOI2009]中国象棋 DP,递推,组合数
  • [BZOJ4337][BJOI2015]树的同构(树的最小表示法)