vue-ant-design实现表尾footer合计

这周项目原型中出现一个表尾合计的功能，本来以为挺简单的，结果还是花了我一天半的时间才解决。自己刚接触这个框架，文档看的也不是特别明白，总之只找到一个footer的属性，也没有例子，然后就各种搜索，最后只找到一篇相关的文章做参考，还是react的，要知道react的语法我一点不懂，好在思路应该可以借鉴。现在记录一下：
参考（1）：https://blog.csdn.net/u013592575/article/details/89023008

总结思路：
在footer中渲染一个与原表一模一样的表结构，隐藏表头，过程也是各种尝试，尤其渲染表格那不太懂什么语法，总之也不完全是vue的

// 1.在表添加footer属性
 <a-table
          ref="TableInfo"
          :rowKey="record => record.programId"
          :columns="columns"
          :dataSource="dataSource"
          :pagination="pagination"
          :loading="loading"
          size="small"
          :scroll="{ x: 1700 }"
          @change="handleTableChange"
          :footer="handleFooterShow"
        >
// 2.vue methods:添加以下方法（渲染表尾）

 handleFooterShow(data) {
      return (
        <a-table
          rowKey={Math.random}
          bordered={false}
          pagination={false}
          columns={this.columnv}
          dataSource={this.footerDataSource}
          showHeader={false}
          size="small"
          scroll={{ x: 1700 }}
        ></a-table>
      );
    },

// ***注意：渲染的footer中的表头columnv需要与表格中的表头columns结构完全一致，并且表头每个字段渲染处都需要给个宽度

但是此时又出现一个问题：数据太长导致表数据与表尾数据都有滚动条，且不同步；于是又有参考二地址，
参考（2）：https://www.jb51.net/article/158492.htm
思路就是找到上面表结构中滚动dom,添加滚动事件监听，然后动态改变下面footer中的表滚动位置；正常这个监听应该是写在mount中的，由于我这个是个子组件，是监听显示变量的时候才加载的，于是就在监听数据改变的方法中绑定的事件

// 以下在监听属性中写
 dataSource(val) {
      // 同步表与footer滚动
      let dom = this.$refs.TableInfo.$el.querySelectorAll(".ant-table-body")[0];
      dom.addEventListener(
        "scroll",
        () => {
          this.$refs.TableInfo.$el.querySelectorAll(
            ".ant-table-body"
          )[1].scrollLeft = dom.scrollLeft;
        },
        true
      );
    }

这时候已经基本实现我想要的效果了，但是表与footer中的表都有滚动条，没有必要都监听一遍，所以我把footer中的表滚动条用样式隐藏掉了

<style lang="less" scoped>
/deep/ .ant-table-footer .ant-table-body{
  overflow: hidden !important;
}
</style>

现在已经基本实现了我想要的效果。虽然有些代码不是很优雅，但是还是实现了想要的效果，有需要的小伙伴可以参考一下。