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

Vue+Element UI table表格,数据展示错位(已解决)

问题

数据显示的不正确,莫名空出来一节,以为是css样式的覆盖,继承问题
在这里插入图片描述

排查

因为数据可能会返回多个空格,于是在表格样式中添加了white-space: pre-wrap,起初以为出现错位的原因,是因为使用了white-space: pre-wrap导致的,但经排查后发现,是编码格式的错误

::v-deep .el-table .cell {
  word-wrap: break-word !important;
  word-break: break-word !important;
  white-space: pre-wrap !important;
}

在这里插入图片描述
换行被white-space: pre-wrap;样式保留了,导致第一行内容偏下。

修改后

在这里插入图片描述
将结构与内容写在同一行即可。
在这里插入图片描述


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

相关文章:

  • Three.js包围盒
  • sqlmap:自动SQL注入和数据库接管工具
  • 线性回归 (Linear Regression)案例分析2
  • 0x02 js、Vue、Ajax
  • Hadoop简介
  • SQL注入(一)—— sql手动注入实操
  • nio中ByteBuffer使用
  • 记录MFC联合halcon界面显示开发
  • Ubuntu下QT安装和调试的常见问题(一)__could_not_dertermine_which_make
  • 大白话解释深度学习中多尺度特征融合及其意义
  • 趣讲TCP三次握手
  • 使用Apifox动态生成请求参数
  • 如何将mobaxterm的默认编辑器修改为vscode
  • 深入浅出:插入排序算法完全解析
  • Java中,Scanner和System.out超时的解决方法及原理
  • 【含文档+PPT+源码】基于过滤协同算法的旅游推荐管理系统设计与实现
  • Spring Boot + JSqlParser:全面解析数据隔离最佳实践
  • 左值引用与右值引用详解
  • Autosar_RTE基础概念整理
  • 为AI聊天工具添加一个知识系统 之125 详细设计之66 智能语义网络