iview-ui 表格滚动懒加载分页功能

前言

iview 的分页只有点击按钮分页组件，前阵子有个需求后端数据不分页返回数据，虽然几千条而已，但表格列项比较多，所以多少会有点卡顿。

可爱的需求人员不喜欢点击按钮分页，给我加鸡腿，故改为滚动懒加载分页。

表格标签：

v-loadmore 自定义的vue指令；触发指令后的回调方法loadMoreTableData

<el-table v-loadmore="loadMoreTableData" :data="tableDataList"> </el-table>

业务逻辑代码

methods中写滚动鼠标后的触发指令的回调方法相应的逻辑

loadMoreTableData() {
    let { pageIndex, pageCount, pageSize, getTableData } = this
    pageIndex++
    if (pageIndex > Math.ceil(pageCount/pageSize)) {
        return false
    }
    getTableData(pageIndex);
},

/**
 * @pageIndex 当前页
 * @pageCount 总数
 * @pageSize 每页显示页数
 * @tableData 通过接口获取到表格数据
 * @tableDataList 计算后要展示的表格数据
 */
getTableData(pageIndex) {
    let { pageCount, pageSize, tableData, tableDataList } = this
    pageCount = tableData.length
    if (pageCount <= pageSize) {
      tableDataList = tableData
    }else {
      let pageIndexs = Math.ceil(pageCount/pageSize)
      if( pageIndex > pageIndexs) { pageIndex = pageIndexs }
      let start = (pageIndex - 1) * pageSize
      let end = pageIndex * pageSize
      tableDataList = tableDataList.concat(tableData.slice(start, end))
    }
}

vue的自定义指令：

import Vue from 'vue'
Vue.directive('loadmore', {
    bind(el, binding) {
        // 获取iview-ui定义好的scroll盒子
        const selectWrap = el.querySelector('.ivu-table-body')
        selectWrap.addEventListener('scroll', function() {
         /*
          * scrollHeight 元素标签内容高度
          * scrollTop 获取元素滚动的偏移值,
          * clientHeight 元素标签的可见高度
          * 如果元素滚动到底, 下面等式返回true, 没有则返回false:
          * ele.scrollHeight - ele.scrollTop === ele.clientHeight;
          */
            let sign = 100
            const scrollDistance = this.scrollHeight - this.scrollTop - this.clientHeight
            if (scrollDistance <= sign) {
                binding.value()
            }
        })
    }
 })

转载自我的原创 掘金篇