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;样式保留了,导致第一行内容偏下。
修改后
将结构与内容写在同一行即可。