基于antd-vue的table表格增加合计栏

---

前言

需求：table表格增加合计栏

---

提示：以下仅是一种实现方法，下面案例可供参考

一、使用步骤

1.首先在主表格后新增另外一个table

代码如下（示例）：

  <a-table ref="table" 
  	:columns="columns" 
  	:data-source="data" 
  	class="table"> 
  </a-table>
  <a-table
    ref="totalTable"
    :columns="columns"
    :data-source="totalData"
    class="total-table"
  >
    //需要修改为合计的行
    <template slot="date">
      <span>合计</span>
    </template>
  </a-table>

二、处理两个表格

1.添加监听

初始化的时候就要给合计表添加滚动监听，将合计表的滚动事件赋值给主表格

	mounted(){
	  if(this.$refs.table && this.$refs.totalTable){
	  	this.footerScroll();
	  }
	},
    footerScroll() {
      const dom = this.$refs.table.$el.getElementsByClassName('ant-table-body')[0];
      const footerDom = this.$refs.totalTable.$el.getElementsByClassName('ant-table-body')[0];
      footerDom.addEventListener(
        'scroll',
        () => {
          dom.scrollLeft = footerDom.scrollLeft;
        },
        true
      );
    },

2.隐藏

因为两个table会出现两个滚动条，所以需要隐藏主表格的滚动条以及合计表的表头代码如下（示例）：

.table {
  height: 88%;
  /deep/.ant-table-body {
    overflow-y: scroll;
    overflow-x: hidden !important;
  }
}

.total-table {
  /deep/.ant-table-thead {
    display: none;
  }
  /deep/ td {
    background-color: #f2f6fc;
  }
  /deep/.ant-table-placeholder {
    display: none;
  }
}