1、先上个图:
官方地址:
Vxe Table v4.6
header搞了二层,然后反馈过来,让调整:
{
title: '通讯地址',
width: 200,
showOverflow: 'tooltip',
align: 'center',
sortable: true,
filters: companyOptions,
filterRender: { name: 'FilterContent' },
children: [
{
title: '地址',
width: 100,
field: 'addr_tx',
showOverflow: 'tooltip',
align: 'center',
sortable: true,
filters: companyOptions,
filterRender: { name: 'FilterContent' },
},
{
title: '邮编',
width: 100,
field: 'postcode_tx',
showOverflow: 'tooltip',
align: 'center',
sortable: true,
filters: companyOptions,
filterRender: { name: 'FilterContent' },
},
],
},
修改:
{
title: '通讯地址',
width: 100,
field: 'addr',
showOverflow: 'tooltip',
align: 'center',
sortable: true,
filters: companyOptions,
filterRender: { name: 'FilterContent' },
},
{
title: '邮编',
width: 100,
field: 'postcode',
showOverflow: 'tooltip',
align: 'center',
sortable: true,
filters: companyOptions,
filterRender: { name: 'FilterContent' },
},
这里如果想搞二列头,那么只要写成children:[]的格式就行。有些人喜欢多行表头,有的人不喜欢多行多头,当然这里最好是可以通过后台的设置,自动进行代码的调整是最优的解决方案。
2、然后列宽的问题:
将左右的滚动条给去了,那么我们就要考虑列不能太多,只要显示几列重要的信息就可以了,然后我们只能根据屏幕来自动调整宽度了。
{
title: '创建时间',
minWidth: 100,
maxWidth: 300,
field: 'createdate',
showOverflow: 'tooltip',
align: 'center',
sortable: true,
// filters: companyOptions,
// filterRender: { name: 'FilterContent' },
},
这个里面有二个属性可以实现:
minWidth:最小的宽度,maxWidth:最大的宽度,如果屏幕是宽屏的话,那么会以最大的300去显示,这样就可以自动缩放到最大了。