關於 ant design 增加底部合計行方案 (一個歪門邪道的方法)

現在 ant design 在表格里已經增加了 summary API 可以實現底部合計功能；但由於 antd 提供的並不能實現固定在底部；antd 提供的 footer 倒是可以固定在底部，但它不會隨滾動條滾動，所以小編在這里進行了一些改良；

剛開始接到這個需求的時候也是在網上查了一大堆，發現都不太符合目前 ui 需求 (其實是自己太菜看不懂。。。)

方法一： 思路：小編使用的是 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)
復制代碼

這樣就可以了，然后就是設置底部合計欄每個div的寬度與上面表格內容對齊；

最后通過樣式隱藏其中一條滾動條就好了 (此方案產生於2021.03.02)

方法二：思路：獲取到合計的數據，將數據 push 到表格里面去， 然后將表格的最后一個元素設置 position:sticky 即可固定在底部( 注：一定要設置在 td 身上)

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

效果如下：

(此方案產生於2021.03.09) 簡單有效，不費性能

一個歪門邪道的前端提供的旁門左道方法

作者：一個只會旁門左道的前端
鏈接：https://juejin.cn/post/6937605583306489870
來源：掘金
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。