前端通过后端传过来的‘\n‘换行失败问题

最新推荐文章于 2025-01-12 13:56:01 发布

原创最新推荐文章于 2025-01-12 13:56:01 发布 · 2.1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js

vue 专栏收录该内容

30 篇文章

订阅专栏

本文介绍如何在iView Vue项目中实现表格单元格内的文本换行显示。通过使用特定的渲染方法，使得从后端获取的包含特殊换行符的数据能够正确地在前端展示为多行文本。

简介：使用的是iview vue table组件
目标：传过来的数据如果有，就换行

使用方法：
js:

{
          title: "工作成果",
          align: "center",
          key: "file_names",
          render: (h, params) => {
              if(params.row.file_names == "") {
                return h('span', '');
              }else{
                return h('span',{
                  style:{whiteSpace:'pre-line'}
                },params.row.file_names)
              }
            }
        },

注意事项：
1.之前使用的是class但是添加样式添加不上，所以使用的行内样式
2.后台推过来的数据需要有\n,或者可以前端自己处理，只有有\n才能生效

效果：见工作成果一列
在这里插入图片描述