Ant Design of Vue没有表格合计行api，换种思路

小知识，大挑战！本文正在参与程序员必备小知识”创作活动。

前言

最近项目来了一个新增加的需求,是要给所有模块的表格加上合计行，于是我随即打开了Ant Design Vue的官网,但出乎我意料的是竟然没有,react版本的组件库是有的... 仔细翻阅api,终于被我找到了一个可以用到的api

效果展示

我们先来看下效果

代码实现

实现上面这个效果,需要用到footer这个api,本质是新渲染一个table嵌入到尾部

结构

    <a-table
        :bordered="false"
        rowKey="uid"
        size="small"
        :footer="handleFooterShow"
        :data-source="table.data"
        :pagination="table.pagination"
        :loading="table.loading"
        @change="pageChange"
        :columns="columns"
    >
    </a-table>

方法

准备一个handleFooterShow方法,

handleFooterShow() {
       const columns = this.columns
       columns.forEach(item => {
           item.width = (100 / columns.length) + '%'
       })
      return (
        <a-table
          rowKey={Math.random}
          bordered={false}
          pagination={false}
          columns={this.columns}
          dataSource={this.footerDataSource}
          showHeader={false}
          size="small"
        >
        </a-table>
      );
    },

return一个table，不显示头部,由于我们只需要一行，即dataSource**数据源为长度为1的数组(由后端提供,前端稍微处理,格式同原始表格数据,需要合计的返回数字，不需要的可以返回空串)，columns同data中的colums。

这里有一个点需要注意，上述方法对colums进行了遍历，添加width属性进行赋值，变成等分的,为了避免尾部的表格同原来的表格出现列错位。这是一种偷懒的方法，适用于列可等分的情况。

还有一种情况是表格列数不多,需要宽度层次分明的情况，这时单独设置width,每一项都要设置，总和100%,超过百分百会出现滚动条，不美观。

data

columns:[
            {
              title: '序号',
              dataIndex: 'uid',
              width: '20%'
            },
            {
              title: '所属大队',
              dataIndex: 'dd',
              width: '80%'
            },
       ]  

dataSource数据源

使用计算属性

computed: {
  footerDataSource () {
      let summary = Object.assign({}, this.footData[0])
      for (let item in summary) {
        summary[item] = '合计'
        break
      }
      return [summary]
    }
  },

this.footData[0]就是后端返回的合计数据，取数组第一项操作，将第一项修改为'合计'，返回新数组，大功告成!