antd vue table组件实现合计栏（使用summary无效）曲线救国！！！

元素代码：

<!--      表格内容-->
      <div style="margin-top:10px;">

        <!--      人员类型表格-->
        <a-table :scroll="{x:'100%',y:460}" @change="handleTableChange" id="contentTable" class="j-table-force-nowrap " :loading="loading" size="middle" :pagination="false"  ref="tableHe" :data-source="dataSource" bordered>
          <a-table-column  key="drawerName"  title="开单人" data-index="drawerName" :ellipsis="true" :width="70"/>

          <!-- <a-table-column-group>
            <template #title><span >实收金额</span></template>
            <a-table-column  key="paidFor" title="已支付" data-index="paidFor" :sorter="(a, b) => a.paidFor - b.paidFor"/>
            <a-table-column  key="billOfCharge" title="收费单" data-index="billOfCharge" :sorter="(a, b) => a.billOfCharge - b.billOfCharge"/>
            <a-table-column  key="totalAmount" title="总金额" data-index="totalAmount" :sorter="(a, b) => a.totalAmount - b.totalAmount"/>
          </a-table-column-group> -->

          <a-table-column  key="paidInAmount" title="实收金额" data-index="paidInAmount" :ellipsis="true" :sorter="(a, b) => a.paidInAmount - b.paidInAmount" :width="100"/>

          <a-table-column  key="passengerVolume" title="客量" data-index="passengerVolume" :ellipsis="true" :sorter="(a, b) => a.passengerVolume - b.passengerVolume" :width="100"/>

          <a-table-column  key="guestList" title="客单" data-index="guestList" :ellipsis="true" :sorter="(a, b) => a.guestList - b.guestList" :width="100"/>

          <a-table-column  key="cost" title="成本" data-index="cost" :ellipsis="true" :sorter="(a, b) => a.cost - b.cost" :width="130" />

          <a-table-column  key="grossProfit" title="毛利" data-index="grossProfit" :ellipsis="true" :sorter="(a, b) => a.grossProfit - b.grossProfit"  :width="130"/>

          <a-table-column  key="grossProfitMargin" title="毛利率" data-index="grossProfitMargin" :ellipsis="true"  :sorter="(a, b) => a.grossProfitMargin - b.grossProfitMargin"  :width="130"/>

       



          <template slot="footer">
            <a-table
              bordered
              id="footerTableID"
              size="small"
              class="footerTable"
              :scroll="{x:'100%'}"
              :columns="footerTableColumn"
              :dataSource="footerTableDataSource"
              :pagination="false"
            >
              <span slot="serial">合计</span>
            </a-table>
          </template>

        </a-table>
        <div style="float: right; font-size: 16px;margin: 10px;">总计{{dataSource.length}}条</div>
      </div>

所有css代码：

<style lang="less" scoped>

.cont_main{
  width: 100%;
  padding:10px 30px 30px 30px;
  ::v-deep #components-table-demo-summary tfoot th,
  ::v-deep #components-table-demo-summary tfoot td {
    background: #fafafa;
  }
  ::v-deep  [data-theme='dark'] #components-table-demo-summary tfoot th,
  ::v-deep [data-theme='dark'] #components-table-demo-summary tfoot td {
    background: #1d1d1d;
  }

  ::v-deep .ant-table-fixed-left table, .ant-table-fixed-right table{
    width: min-content;
  }

}
.tableListStyle{
  ::v-deep .ant-table-thead > tr > th{
    text-align: left !important;
  }
  ::v-deep .ant-table-tbody > tr > td:nth-child(1){
    color:#6ABCF5;
  }
  ::v-deep .ant-table-tbody > tr > td:nth-child(5),
  ::v-deep .ant-table-thead > tr > th:nth-child(5),
  ::v-deep .ant-table-tbody > tr > td:nth-child(9),
  ::v-deep .ant-table-thead > tr > th:nth-child(9),
  ::v-deep .ant-table-tbody > tr > td:nth-child(10),
  ::v-deep .ant-table-thead > tr > th:nth-child(10),
  ::v-deep .ant-table-tbody > tr > td:nth-child(11),
  ::v-deep .ant-table-thead > tr > th:nth-child(11),
  ::v-deep .ant-table-tbody > tr > td:nth-child(12),
  ::v-deep .ant-table-thead > tr > th:nth-child(12){
    text-align: right !important;
  }
  ::v-deep .ant-table-tbody > tr > td{
    text-align: left !important;
  }
}
.kanban_table{
  width:100%;
  .search_box{
    display: flex;
    align-items: center;
    justify-content: space-between;
    .r_box{
      display: flex;
      align-items: center;
      .ant-btn{
        margin-left: 18px;
      }
    }
    .type_box{
      width:90px;
      height:35px;
      border: 1px solid #E3E4E7;
      border-radius:5px;
      display: flex;
      div{
        width: 100%;
        display: flex;
        box-sizing: border-box;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        color: #A6AEB6;
      }
    }
  }
}
.active{
  color: #333 !important;
  background: #EFF7FF;
}

/deep/ .ant-modal-content{
  .ant-modal-body{
    padding:0 0 15px 25px;
  }
  .ant-modal-header{
    padding: 10px 24px;
    background: #EFF1F5;
  }
  .anticon{
    vertical-align:0.3em;
  }
}
.m_cont{
  width: 100%;
  height:400px;
  display: flex;
  .f_form{
    width: 60%;
    margin-top: 20px;
  }
  .f_way{
    width: 40%;
    background:#F6F8FA !important;
    box-sizing: border-box;
    border-left: 1px solid #E8EBEF;
    padding-left: 10px;
  }
}
/deep/ .ant-table-thead{
  th{
    background: #FAFAFA !important;
    padding:7px 0px !important;
    text-align: center;
  }
}
/deep/ .ant-table-body{
  td{
    text-align: center !important;
  }
}
#contentTable{
  ::v-deep .ant-table-body{
    overflow-x: hidden !important;
  }
  ::v-deep .ant-table-footer .ant-table-body{
    overflow-x: scroll !important;
  }
}
.footerTable{
  width:99.6%;
  ::v-deep .ant-table-thead{
    display: none;
  }

  ::v-deep .ant-table-body{
    margin: 0px !important;
    tr,td{
      background: #FAFAFA !important;
      border-top: 1px solid #E8E8E8 !important;
      font-weight: 600;
    }
  }
  ::v-deep .ant-table-thead{
    display: none;
  }
  ::v-deep .ant-table-small.ant-table-bordered{
    border:0px;
  }
  ::v-deep .ant-table-small.ant-table-bordered .ant-table-footer{
    border: 0px;
  }
}
/deep/ .ant-table-content{
  .ant-table-footer{
    padding: 5px 0 !important;
  }
}
</style>

当前为两个滚动条（主体一个 合计一个），并且横向滚动合计跟主体不能同步滚动：

解决方法：
实现滚动一个滚动条 主体跟合计内容同步横向滚动

data:{
	return{
		dom:null,
		footerDom:null,
	}
},
mounted(){
	 this.dom = document.getElementById('contentTable')
    this.footerDom = document.getElementById('footerTableID');
    this.footerDom.addEventListener('scroll', this.footerDomScrollChange,true)
},
// beforeDestroy 与 destroyed 里面移除都行
  beforeDestroy () {
    // 移除监听
    this.footerDom.removeEventListener('scroll', this.footerDomScrollChange,true)
  },
methods:{
    footerDomScrollChange(){
      if(this.footerDom != null){
        if(this.dom != null){
          console.log("获取元素：：",this.dom,this.footerDom)
          this.dom.children[0].children[0].children[0].children[0].children[0].children[1].scrollLeft = this.footerDom.children[0].children[0].children[0].children[0].children[0].children[0].scrollLeft;
        }
      }
    },
   }

使页面只显示一个滚动条css代码：

#contentTable{
  ::v-deep .ant-table-body{//隐藏主体内容滚动条
    overflow-x: hidden !important;
  }
  ::v-deep .ant-table-footer .ant-table-body{//显示合计滚动条
    overflow-x: scroll !important;
  }
}