el-table大数据量加载

参考： https://codepen.io/william_yyh/pen/mdmEzPw

//

let timer = null;

const setRowDisableNone = function (start, end, binding) {

    if(timer) {

        clearTimeout(timer);

        timer = null;

    }

    timer = setTimeout(() => {

        binding.value.call(

            null,

            start,

            end

        )

    })

};

const {floor, round} = Math;

  // 获取元素

const $el = (dom, id) => dom.querySelector(id);

const $h = (tag) => document.createElement(tag);

const setStyle = (dom, arr) => dom.setAttribute('style', arr)

// function setscrolls() {

//     let scrollTop = this;

//     const half

// }

 

export default {

    componentUpdated(el, binding, vnode, oldVnode) {

        // 表格显示数据量

        let spillDataNum = (vnode.componentOptions.propsData.data || []).length || 6;

        setTimeout(() => {

            const dataSize = vnode.data.attrs["data-size"];

            const oldDataSize = oldVnode.data.attrs["data-size"];

            if(dataSize === oldDataSize) return;

            const m_body_wrap = $el(el,'.el-table__body-wrapper');

            const m_tbody = $el(m_body_wrap, "table tbody");

            const l_body_wrap = $el(el, ".el-table__fixed-left .el-table__fixed-body-wrapper");

            const l_tbody = l_body_wrap && $el(l_body_wrap, "table tbody")

            const r_body_wrap = $el(el, ".el-table__fixed-right .el-table__fixed-body-wrapper");

            const r_tbody = r_body_wrap && $el(r_body_wrap, "table tbody")

            const m_row = $el(m_body_wrap, "table tr");

           

            if(!m_row) {

                return;

            };

            const m_row_h = m_row.clientHeight;

            let showRowNum = round(m_body_wrap.clientHeight / m_row_h);

            let h_t = 0;

            let h_b = (dataSize - spillDataNum) * m_row_h;

            const m_tr_top = $h('tr');

            const m_tr_bottom = m_tr_top.cloneNode(true);

            setStyle(m_tr_top, `height: ${h_t}px `);

            setStyle(m_tr_bottom, `height: ${h_b}px `);

            m_tbody.insertBefore(m_tr_top, m_row)

            m_tbody.append(m_tr_bottom)

            let l_tr_top, l_tr_bottom, r_tr_top, r_tr_bottom;

           

            if(l_tbody) {

                let l_row = $el(l_body_wrap, "table tr");

                l_tr_top = m_tr_top.cloneNode(true);

                l_tr_bottom = m_tr_bottom.cloneNode(true);

                l_tbody.insertBefore(l_tr_top, l_row)

                l_tbody.append(l_tr_bottom)

            }

     

            if(r_tbody) {

                let r_row = $el(r_body_wrap, "table tr");

                r_tr_top = m_tr_top.cloneNode(true);

                r_tr_bottom = m_tr_bottom.cloneNode(true);

                r_tbody.insertBefore(r_tr_top, r_row)

                r_tbody.append(r_tr_bottom)

            }

 

            m_body_wrap.addEventListener("scroll", function() {

                let { scrollTop } = this;

                const half = round((spillDataNum - showRowNum) / 2);

                const rScrollTop = scrollTop - m_row_h * half;

               

                const offsetSt = rScrollTop > 0 ? rScrollTop : 0;

                let topNum = floor(offsetSt / m_row_h);

                if(topNum + spillDataNum >= dataSize) {

                    topNum = dataSize - spillDataNum

                };

                let topPx = topNum * m_row_h;

                let topx = h_b - topPx >= 0 ? topPx : h_b;

                let bottomx = h_b - topPx >= 0 ? h_b - topPx : 0;

                setStyle(m_tr_top, `height: ${topx}px `);

                setStyle(m_tr_bottom, `height: ${bottomx}px `);

                if(l_tbody) {

                    setStyle(l_tr_top, `height: ${topx}px `);

                    setStyle(l_tr_bottom, `height: ${bottomx}px `);

                }

                if(r_tbody) {

                    setStyle(r_tr_top, `height: ${topx}px `);

                    setStyle(r_tr_bottom, `height: ${bottomx}px `);

                }

                setRowDisableNone(topNum, topNum + spillDataNum, binding)

            })

 

        })

 

    }

}