vue表格底部添加合计栏，且能跟主表同时滑动

例如，下方图片

<template><a-tableref="table"size="middle"borderedrowKey="id":columns="tableColumn":dataSource="dataSource"><template slot="footer" slot-scope="currentData"<a-table:columns="tableColumn":data-source="totalData"borderedref="footTable":showHeader="false"style="width: 100%"></a-table></template></a-table></div></a-card>
</template><script>
export default {data() {return {totalData: [],//合计数据}},mounted() {
//确保主表滑动，合并行也会滑动this.$nextTick(() => {const tableBody = this.$refs.table if (tableBody) {const tableContainer = tableBody.$el.querySelector('.ant-table-body')tableContainer.addEventListener('scroll', this.handleScroll)}})},methods: {//查询数据loadData(arg) {this.loading = truegetAction(this.url.list, params).then((res) => {if (res.success) {this.dataSource = res.result.recordsthis.queryTotal()}this.loading = false})},//查询合计值queryTotal() {//计算出合计的值,根据自己的数据计算this.totalData=[]}},handleScroll(event) {//合计栏跟着滑动this.$refs.footTable.$el.querySelector('.ant-table-body').scrollLeft = event.target.scrollLeft;},},
}
</script>
<style scoped>
/deep/ .ant-table-footer {padding: 0 !important; //底部间隔
}
/deep/.ant-table-footer .ant-table-body {overflow: hidden !important;padding: 0 !important;margin: 0 !important;
}
</style>