antdv的table没有做任何设置,限制了父盒子宽度就会出现这种情况,求解答一下
预期:table的col自适应宽度
现状:固定宽度撑开
【相关推荐】
{ title: '总板数', resizable: true, dataIndex: 'totalBoard', width: 150, align: 'center', ellipsis: true, summary: true },
2.搭好基础结构,直接上代码
2.1当需要合计时才去遍历表格数据使用reduce计算总合计数量
<template #summary>
<a-table-summary fixed>
<a-table-summary-row>
<a-table-summary-cell :index="0"> 合计</a-table-summary-cell>
<a-table-summary-cell v-for="(item, index) in columns" :key="index" :index="1">
// 当列配置了summary为true才合计
<template v-if="item?.summary">
<a-typography-text>
{{ dataSource.reduce((prev: number, next: : any }) => {
return prev + next.totalBoard
}, 0)}}
</a-typography-text>
</template>
</a-table-summary-cell>
</a-table-summary-row>
</a-table-summary>
</template>
2.2代码优化
当字段为动态时,并且模板里写太多ts语法看起来太臃肿,所以抽成计算属性更好维护
// 模板
<template #summary>
<a-table-summary fixed>
<a-table-summary-row>
<a-table-summary-cell :index="0"> 合计</a-table-summary-cell>
<a-table-summary-cell v-for="(item, index) in contentTableParam.columns" :key="index" :index="1">
<template v-if="item?.summary">
<a-typography-text>
{{ combinedNums(item.dataIndex) }}
</a-typography-text>
</template>
</a-table-summary-cell>
</a-table-summary-row>
</a-table-summary>
</template>
/**
* @returns 计算合计行
*/
const combinedNums = computed(() => (field: any) => {
return contentTableParam.dataSource.reduce((prev: number, next: { [x: string]: any }) => {
return prev + next[field]
}, 0)
})