自定义指令实现表格填充剩余空间

场景描述

PC端网页开发时，表格的CRUD是我们逃不掉的宿命。在渲染表格时，往往是默认 10 | 15 | 20 作为表格请求的长度，但是由于显示屏和电脑设置等等导致的差异，有时候会导致表格下方出现大量空白。这时候我们可以根据屏幕的剩余空间去动态改变 pageSize 的值，以达到较好的效果。因为无法保证每一行都是占用一行，所以出现滚动条是很正常的。

具体实现

计算每页数量

基于 el-table 的自定义指令，el-table 每一行默认的高度为 40 ；根据自己的场景，表格距离底部的一个距离，一般底部都是有分页组件的。实现 resize 函数，在该函数内实现表格的第一次请求。

// 默认表格每一行的高度
const defaultRowHeight = 40
// pageination的高度50 + mg-top:12 + 页面的padding20
const bottomHeight = 82

const resize = (el, bind) => {
    const { value } = bind
    const {
        params,
        getTableData,
    } = value

    const height = window.innerHeight - el.getBoundingClientRect().top
    el.style.height = 'auto'

    // 获取表头的高度
    const elTableHeaderDom = el.querySelector('.el-table__header-wrapper')
    // delSize是除去表头的行数
    const delSize = elTableHeaderDom && Math.ceil(elTableHeaderDom.clientHeight / defaultRowHeight)

    // 分页表格
    const autoSize = Math.ceil((height - bottomHeight) / defaultRowHeight) - delSize
    params[sizeKey] = autoSize <= 0 ? 1 : autoSize
    getTableData && getTableData()
}

监听屏幕变化，动态改变 size

const setObserver = (el, bind) => {
    el.resizeObserver = new ResizeObserver(
        // 这是lodash库的节流函数
        _.throttle(() => {
            resize(el, bind);
        }, 500)
    );
    // 监听body的变化
    el.resizeObserver?.observe(document.body);
}

清除observer

const clearObserver = el => {
	el.resizeObserver?.disconnect()
	delete el.resizeObserver
}

指令实现

注意 keep-alive 的组件

export default {
    mounted(el, bind) {
        setObserver(el, bind)
    },
    beforeUpdate(el, bind) {
        // keep-alive组件activated
        if (el.isConnected && !el.resizeObserver) {
            setObserver(el, bind)
        }

        // keep-alive组件deactivated
        if (!el.isConnected && el.resizeObserver) {
            clearObserver(el)
        }
    },
    // 非keep-alive组件卸载
    beforeUnmount(el) {
        clearObserver(el)
    },
}

碎碎念

秉承着学习、虚心请教的态度，以后可能会发一些文章，虽然没啥技术含量，但也算是起步。如果对于文章有更好的方案可以指点指点。