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

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

重要的事情说三遍:

首先修改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;
    }
}

scoped中:
.htTable是要修改的表自定义class

.htTable:deep(.el-table th>.cell) {
    white-space: pre-wrap;
}

label写法

如果label中是固定值,例如

  <el-table-column prop="level44" label="75%<履行≤100%" align="center" width="160" >

可以使用动态赋值的写法+换行符 /n

修改如下:

  <el-table-column prop="level44" :label="'75%<履行≤100% /n 换行'" align="center" width="160" >

如果label中是动态赋值,label的值是在data中声明的,可以直接添加换行符,如下:

list:[

{label:'履行 /n 换行',width:40}

]
  • 3
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值