如图效果图展示表头内容换行展示,代码如下:
在data中定义表头column
Columns:[
{
title: this.labelFn('Name', 'Name'),
key: 'name',
align: 'center',
},
]
在methods中定义方法
labelFn (name, str) {
// 在需要换行的地方加入换行符 \n ,在搭配最底下的white-space样式设置
return name + `\n` + str
},
在css中结合样式实现文章来源:https://www.toymoban.com/news/detail-656185.html
// 表头
/deep/.ivu-table-header span,ivu-table-cell{
white-space: pre-wrap;
}
以上结合能实现表头换行展示。文章来源地址https://www.toymoban.com/news/detail-656185.html
到了这里,关于iview中table表头内容换行展示的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!