antdesignvue table底部增加合计行

Stacey-TL

已于 2023-04-24 11:22:43 修改

阅读量1.7k

点赞数

文章标签：前端 javascript vue.js

于 2023-04-24 10:41:35 首次发布

本文链接：https://blog.csdn.net/qq_38687592/article/details/130337557

版权

文章介绍了两种方法来处理表格底部合计栏的显示。方法一是通过footerAPI设置overflow:auto，监听滚动事件，使底部滚动条与表格内容同步。方法二是将合计数据直接添加到表格中，利用CSS的position:sticky将合计行固定在底部，提供视觉上的固定效果。

摘要由CSDN通过智能技术生成

方法一：

思路：用 footer API 通过设置 overflow：auto 使底部合计栏出现滚动条，然后通过控制一条滚动使另一条滚动条随之滚动即可

const warp = domWarp.current.getElementsByClassName("ant-table-body")[0];
const wrapBottom = domWarp.current.getElementsByClassName('ant-table-footer')[0]
warp.addEventListener("scroll",() => {
wrapBottom.scrollLeft = warp.scrollLeft
},true)

方法二：

思路：获取到合计的数据，将数据 push 到表格里面去，然后将表格的最后一个元素设置 position:sticky 即可固定在底部(注：一定要设置在 td 身上)

tr:last-child td {
background: #fff;
position: sticky;
bottom: 0px;
z-index: 1;
box-shadow: 5px 0 10px #e4e4e4;
}

this.data = res.data

this.data.push({xuhao:'合计', money:sumMoney})

columns: [
{
title: '序号',
dataIndex: 'xuhao',
align: 'center',
fixed: 'left',
customRender: (text, record, index) => {
return record.xuhao=='合计'?'合计':index+1
}
},

...

...

]