首页
学习
活动
专区
圈层
工具
发布
社区首页 >专栏 >ElementUI el-table-column根据占位符换行方法

ElementUI el-table-column根据占位符换行方法

作者头像
SmileNicky
发布于 2021-05-24 16:15:32
发布于 2021-05-24 16:15:32
4K0
举报
文章被收录于专栏:Nicky's blogNicky's blog

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

代码语言:javascript
复制
StringBuffer stb= new StringBuffer();
stb.append("测试消息").append("\n");

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

html还是照旧写:

代码语言:javascript
复制
 <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>

关键在css文件添加:

代码语言:javascript
复制
.el-table .cell {
    white-space: pre-line;
}
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2021/05/20 ,如有侵权请联系 cloudcommunity@tencent.com 删除
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档