el-table中label换行,以及表头表格内容换行

无论你使用\n还是<br/>都无法实现换行,今天给大家介绍两种换行的方式;

方法1:

        如果el-table-column不是渲染的,而是写死的,例如

        

        这时可以把label内容当成变量在label前加:进行使用,内容在需要换行的地方加\n

        

方法2:

        如果 el-table-column是渲染的,例如

        

        渲染的直接在需要换行的地方加\n或者<br/>均可;

总结:

           无论你是使用以上哪总方式渲染,都需要修改el-table的css;

           无论你是使用以上哪总方式渲染,都需要修改el-table的css;

           无论你是使用以上哪总方式渲染,都需要修改el-table的css ;

        (重要的事情说三遍;重要的事情说三遍;重要的事情说三遍)

css修改:

        

//如果是单独设置表头换行

.el-table th>.cell {
    white-space: pre-wrap;
}


//或者全局换行
.el-table{
    .cell {
        white-space: pre-wrap;
    }
}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值