antdv的table表头不能自适应宽度

antdv的table没有做任何设置,限制了父盒子宽度就会出现这种情况,求解答一下
预期:table的col自适应宽度
现状:固定宽度撑开

img


预期效果

img

【相关推荐】



  • 你可以看下这个问题的回答https://ask.csdn.net/questions/7501083
  • 这篇博客你也可以参考下:antd pro关于Table组件的扩展行:实现点开扩展行的时候才去后台取数据
  • 除此之外, 这篇博客: antdvue的table合计行中的         1。首先给table配置column的时候,要明确哪些字段需要使用合计,如上图,只有总板数需要使用合计,那给总板数的配置加上标识符 即可,我这里为了方便辨识,直接增加了 summary:true 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:
    { 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)
    })


如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^