vue 动态表格组件

效果图

看着很朴素是不是哈哈哈哈哈写得还挺费劲呢~

需求：
1.表格分页始终居于页面底部；
2.监听页面高度变化，实现表格高度自适应。

整体思路：
1.页面通常分为三部分：固定框架部分，搜索部分，表格部分；
2.用监听到的页面高度，减去固定的框架高度，再减去搜索部分的高度，即为表格高度；
3.给表格设置动态高度，监听页面resize，当页面高度发生变化时，表格高度随即改变，以保证分页在页面最底部；
4.表格的数据需要做些处理。

后期完善：
1.每列的min-width一般按照表头的字数给定，根据具体情况，涉及到时间及身份证号类的数据，要展示完全；

组件表格：
1.el-table-column采用v-for的方式；
2.有些不是常规显示的行，先判断，再做成插槽的形式根据每页不同自行设置。

其中会用到监听客户屏幕高度的方法，和防抖的方法debounce ↓

/**
 * 监听浏览器屏幕高度
 * @return {Number} 
 */
export function getDynamicHeight(ref) {
    let fixedHeight = 132;

    let containerHeight = window.innerHeight - fixedHeight || document.documentElement.clientHeight - fixedHeight || document.body.clientHeight - fixedHeight;
    let listHeight = ref ? containerHeight - parseInt(window.getComputedStyle(ref).height) : containerHeight;

    return {
        listHeight
    }
};

/**
 * 防抖：从别的框架抄来的。。。一看注释就很专业绝对不是我自己写的哈哈哈哈哈哈哈
 * @param {Function} func
 * @param {number} wait
 * @param {boolean} immediate
 * @return {*}
 */
export function debounce(func, wait, immediate) {
    let timeout, args, context, timestamp, result

    const later = function () {
        // 据上一次触发时间间隔
        const last = +new Date() - timestamp

        // 上次被包装函数被调用时间间隔 last 小于设定时间间隔 wait
        if (last < wait && last > 0) {
            timeout = setTimeout(later, wait - last)
        } else {
            timeout = null
            // 如果设定为immediate===true，因为开始边界已经调用过了此处无需调用
            if (!immediate) {
                result = func.apply(context, args)
                if (!timeout) context = args = null
            }
        }
    }

    return function (...args) {
        context = this
        timestamp = +new Date()
        const callNow = immediate && !timeout
        // 如果延时不存在，重新设定延时
        if (!timeout) timeout = setTimeout(later, wait)
        if (callNow) {
            result = func.apply(context, args)
            context = args = null
        }

        return result
    }
}

组件BaseTable正式代码

需要用到该组件的父级页面代码
我实在是写不动注释了。。都是语义化，强行写注释也是翻译凑合看吧哈哈哈哈哈哈哈

tada~_{一个列表组件就完成啦}