Vue+Element-ui 中 使用el-table 设置表格单元格 (el -table-column) 保留空格和换行

遇到的问题

在使用 el-table 展示数据时,单元格中的数据中存在多个空格和换行符,若不进行设置,浏览器默认会取消空格和换行符。

解决办法

将单元格的样式 "white-space" 属性设置为"pre-wrap" 即可解决

css 复制代码
::v-deep .el-table .cell {
  white-space:pre-wrap;
}

Tips

bash 复制代码
white-space属性指定元素内的空白怎样处理。
相关推荐
Jul1en_20 小时前
Claude 迁移 Codex 工作流迁移与更新
java·服务器·前端·后端·ai编程
Heo20 小时前
14_React 中的更新队列 updateQueue
前端·javascript·面试
前端 贾公子20 小时前
解决浏览器端 globalThis is not defined 报错
前端·javascript·vue.js
宁雨桥20 小时前
前端与AI结合实战分享
前端·人工智能
之歆20 小时前
DAY12_CSS3选择器全攻略 + 盒子新特性完全指南(下)
前端·javascript·css3
kyriewen1120 小时前
代码写成一锅粥?3个设计模式让你的项目“起死回生”
开发语言·前端·javascript·设计模式·ecmascript
光影少年20 小时前
react函数组件、类组件、纯组件、受控/非受控组件
前端·react.js·掘金·金石计划
程序员包打听20 小时前
MoonBit 是什么?给第一次听说这门语言的你
前端·后端
Rkgua20 小时前
CSS动画效果
前端·css
Rkgua20 小时前
Flexbox 与 Grid 布局
前端·css