ElementUI表格行column根据占位符换行方法

Element UI 是一套采用 Vue 2.0 作为基础框架实现的组件库，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的组件库，提供了配套设计资源，帮助网站快速成型.

后台java代码，加上\n换行符

StringBuffer stb= new StringBuffer();
stb.append("测试消息").append("\n");

TestModel t = new TestModel();
t.setMsg(stb.toString());

  

 

  
1
  
2
  
3
  
4
  
5
 

html还是照旧写：

 <el-table :data="handleInfo" :header-cell-style="headClass" height="350px" border>
<el-table-column label="序号" width="60" align="center"> <template slot-scope="scope">{{scope.$index+1}}</template>
</el-table-column>
<el-table-column prop="stepName" label="环节名称" align="center" width="150">
</el-table-column>
<el-table-column prop="msg" label="办理意见">
</el-table-column>
</el-table>

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14
  
15
  
16
  
17
  
18
  
19
  
20
  
21
  
22
 

关键在css文件添加：

.el-table .cell { white-space: pre-line;
}

  

 

  
1
  
2
  
3
 

文章来源: smilenicky.blog.csdn.net，作者：smileNicky，版权归原作者所有，如需转载，请联系作者。

原文链接：smilenicky.blog.csdn.net/article/details/117063395