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

Question

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

预期效果

Answer 1

【相关推荐】

• 你可以看下这个问题的回答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)
  })

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