vue之element-ui表格加载更多自定义指令

/*
    防抖 延时执行
    @param fn function
    @param wait number
    @return function
*/
const debounce = (fn, wait) => {
    var timeout = null
    return () => {
        if (timeout !== null) clearTimeout(timeout)
        timeout = setTimeout(fn, wait)
    }
}
Vue.directive('elTableScrollLoad', {
    inserted(el, binding) {
        let loadEnd = binding.value.loadEnd
        el.timeout = null
        el.timer = null
        // 防止首次加载不够填满容器
        if (!loadEnd) {
            const selectWrap = el.querySelector('.el-table__body-wrapper')
            el.timeout = setTimeout(() => {
                let elTableWrap = parseFloat(el.style.maxHeight || el.style.height)
                if (selectWrap.scrollHeight <= elTableWrap && selectWrap.scrollHeight !== 0 && !loadEnd) {
                    el.timer = setInterval(() => {
                        binding.value.load()
                        if (selectWrap.scrollHeight > elTableWrap) {
                            clearInterval(el.timer)
                            clearTimeout(el.timeout)
                        }
                    }, 1500)
                }
            }, 500)
        }
    },
    async bind(el, binding) {
        let loadEnd = binding.value.loadEnd
        let loadingText = binding.loadingText || '加载中...'
        let loadendText = binding.loadendText || '没有更多了'
        const selectWrap = el.querySelector('.el-table__body-wrapper')
        let remove = () => {
            let ele = el.querySelector('.el-table__body-wrapper').querySelector('.tableloadmoretext')
            if (ele) {
                selectWrap.removeChild(ele)
            }
        }
        if (!loadEnd) {
            let fun = () => {
                let sign = 0
                const scrollDistance = selectWrap.scrollHeight - Math.ceil(selectWrap.scrollTop) - Math.ceil(selectWrap.clientHeight)
                if (scrollDistance <= sign) {
                    binding.value.load()
                }
            }

            let vueScrollEvent = debounce(fun, 500)
            el._vueScrollEvent = vueScrollEvent
            selectWrap.addEventListener('scroll', vueScrollEvent)
            remove()
            let h = document.createElement('div')
            h.innerHTML = `

${loadingText}

` h.style = 'text-align:center;' h.className = 'tableloadmoretext' h.dataname = 'loading' selectWrap.appendChild(h) } if (loadEnd) { remove() let h = document.createElement('div') h.innerHTML = `

${loadendText}

` h.style = 'text-align:center;' h.className = 'tableloadmoretext' h.dataname = 'loaded' selectWrap.appendChild(h) } }, update(el, binding) { if (binding.value.loadEnd) { clearInterval(el.timer) clearTimeout(el.timeout) } // loading loaded none let loadingText = binding.loadingText || '加载中...' let loadendText = binding.loadendText || '没有更多了' if (binding.value.loadEnd !== binding.oldValue.loadEnd) { const selectWrap = el.querySelector('.el-table__body-wrapper') let remove = () => { let ele = el.querySelector('.el-table__body-wrapper').querySelector('.tableloadmoretext') if (ele) { selectWrap.removeChild(ele) } } if (binding.value.loadEnd) { remove() let h = document.createElement('div') h.innerHTML = `

${loadendText}

` h.style = 'text-align:center;' h.className = 'tableloadmoretext' h.dataname = 'loaded' selectWrap.appendChild(h) } if (!binding.value.loadEnd) { remove() let h = document.createElement('div') h.innerHTML = `

${loadingText}

` h.style = 'text-align:center;' h.className = 'tableloadmoretext' h.dataname = 'loading' selectWrap.appendChild(h) } } }, unbind(el) { clearInterval(el.timer) clearTimeout(el.timeout) const selectWrap = el.querySelector('.el-table__body-wrapper') selectWrap.removeEventListener('scroll', el._vueScrollEvent) }, })

使用指令





指令配置

 v-elTableScrollLoad="{ 
  load: load, // 加载数据回调函数 必填
  loadEnd: tableloadStatus, // 是否加载完成标志 Boolean 必填
  loadingText:'loading...' //  加载中文字  string 非必填
  loadendText:'no more'  //   加载完成文字  string 非必填
}"

你可能感兴趣的:(vue之element-ui表格加载更多自定义指令)