方式一
colnums: [
{
title: () => {
return (
<div>
<span>长标题</span>
<br/>
<span>第二行</span>
</div>
)
},
dataIndex: 'longTitle',
scopedSlots: {customRender: 'longTitle'},
align: 'center',
width: 120
}
]
方式二
colnums: [
{
title: '长标题',
dataIndex: 'longTitle',
scopedSlots: {customRender: 'longTitle'},
align: 'center',
width: 120
customHeaderCell: () => {
return {
style: {
wordWrap: 'break-word',
wordBreak: 'break-all',
whiteSpace: 'normal',
minHeight: '50px',
width: '150px',
}
}
}
}
]
参考:
antd-vue table表头换行!!!
Antd+vue table列内容过多实现换行显示