table的title自定义换行
iview项目中遇到这类问题,table的title过长,如果自动换行,显示效果不佳。于是经查询,找到解决方案。
table的column中会有type属性,列类型,可选值为 index、selection、expand、html。换行肯定会使用<br/>
,所以type肯定为html,才能识别<br/>
。又在网上找到renderHeader方法。和render方法类似,可以自定义title的格式。于是参照网上的代码便有了如下写法:
{
type: 'html',
title: '',
renderHeader: (h, params) => {
var text = '使用名称为:<br/> 测试商户';
return h('div', {
props: {},
},text);
},
}
但是效果并不理想。
既然有type:‘html’,肯定就有这种写法,我想一定是我的打开方式不对,于是又在网上搜索type:‘html’的写法,最终找到了正确的打开方式:
{
type: 'html',
title: '',
renderHeader: (h, params) => {
var text = '使用名称为:<br/> 测试商户';
return h('div', {
domProps:{
innerHTML: text
}
})
}
}
到此完美解决问题,记录一下