a-table固定表头

ant-design版本：1.7.8

必须承认ant-design本身是一款很优秀的css框架，a-table作为使用频率较高的组件，其中所存在的问题，应该深有体会。

本文仅谈固定表头这个使用场景。

固定表头本身通过一个给a-table增加scroll属性即可达成

但是问题就在，这个具体高度的值，到底应该是多少。其中涉及到一些问题

1. 表格一般是伴随搜索条件，搜索条件自占一行，所以导致表格不会独占整个内容区
2. y应该要减去表头的高度
3. 可能表格还需要分页，那么这个y也应该要减去分页组件的高度
4. 如果表格独占整个内容区，那么可以通过onresize来监听，并相应改变其高度。但如果非独占整个内容区，并且其他内容高度是存在变动可能得，那么onresize就有点不足了，对此可以去参考本人写的另一篇文章，关于resize-observer-polyfill的用法，希望对您解决该问题有所帮助。

下面来阐述本人在遇到该问题的解决方案，仅供参考，如您有其他独特见解或更好的解决方案，欢迎留言，谢谢

首先，resize-observer-polyfill可以说是作为本次解决的核心库，用来时刻监听表格高度或者宽度是否发生了变化，具体代码如下

import ResizeObserver from 'resize-observer-polyfill';

/**
 * 初始化监听对象
 */
const resizeOb = new ResizeObserver(function(entries) {
    for(let entry of entries) {
        const listeners = entry.target.__resizeListeners__;

        if(listeners) {
            (listeners || []).forEach(fn => {
                fn(entry);
            });
        } else {
            resizeOb.unobserve(listeners.target);
        }
    }
});

export default resizeOb;

/**
 * 监视器调用函数
 * @param {ResizeObserverEntry} entry [监视器]
 */
function tableHeight(entry) {
    let hHeight = (entry.target.querySelector(".ant-table-thead") || {clientHeight:0}).clientHeight,
    pHeight = (entry.target.querySelector(".ant-pagination") || {clientHeight:0}).clientHeight;
        
    callback && callback(entry.contentRect.height - hHeight - pHeight);
}

this.$refs.table.$el.__resizeListeners__ = [
    tableHeight(height => {
        this.table.scrollY = height;
    })
];
resizeOb.observe(this.$refs.table.$el);

自此，不管界面如何变动，a-table始终可以固定表头，并动态变更scroll.y的值