二、Element-UI之table 行内cell文字换行

1.普通的table:

<el-table
        class="class-container"
        :data="plans"
        stripe
        border 
        fit
        @cell-dblclick="handleDbClick"
        :cell-style="cellStyle"
        :header-cell-style="{background: '#409EFF', color: '#fff'}"
        style="width: 100%">
            <el-table-column prop="mon" align="center" label="时间段" style="width: 14%"></el-table-column>
        </el-table>

2.行内cell文字换行:

<el-table
        class="class-container"
        :data="plans"
        stripe
        border 
        fit
        @cell-dblclick="handleDbClick"
        :cell-style="cellStyle"
        :header-cell-style="{background: '#409EFF', color: '#fff'}"
        style="width: 100%">
            <el-table-column align="center" :label="times[0]" style="width: 14%">            
                <template slot-scope="scope">
                    <div v-html="scope.row.mon"></div>
                </template>
            </el-table-column>
        </el-table>

这样,就能识别字符串中的换行符,例如:

var mon = '我是' + '<br/>' + '大帅哥'

版权声明:本文为panchang199266原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。