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

Posted 2021-05-25 smileNicky

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());

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>

关键在css文件添加：

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