el-table数据量大滚动加载

最新推荐文章于 2024-08-22 17:09:23 发布

程序员阿明

最新推荐文章于 2024-08-22 17:09:23 发布

阅读量725

点赞数 2

文章标签： vue.js elementui javascript

本文链接：https://blog.csdn.net/weixin_41463944/article/details/125275228

版权

1、新建js文件自定义指令

import Vue from 'vue'

Vue.directive('loadmore', {
  bind(el, binding) {
    const selectWrap = el.querySelector('.el-table__body-wrapper')
    selectWrap.addEventListener('scroll', function() {
      let sign = 0
      const scrollDistance = this.scrollHeight - this.scrollTop - this.clientHeight
      if (scrollDistance <= sign) {
        binding.value()
      }
    })
  },
})

2、在main.js中引入
3、表单组件测试代码，这里测试了50万条数据

<template>
  <div>
    <el-table v-loadmore="loadMore" :data="tableData.slice(0, rangeNumber)" height="60vh" border style="width: 100%">
      <el-table-column prop="date" label="日期" width="180"></el-table-column>
      <el-table-column prop="name" label="姓名" width="180"></el-table-column>
      <el-table-column prop="address" label="地址"></el-table-column>
    </el-table>
  </div>
</template>

<script>
  export default {
    name: 'Test',
    data() {
      return {
        tableData: [],
        rangeNumber: 15,
      }
    },
    created() {
      let table = []
      for (let i = 0; i < 500000; i++) {
        let addData = {
          date: `日期${i}`,
          name: `姓名${i}`,
          address: `地址${i}`,
        }
        table.push(addData)
      }
      this.tableData = table
    },
    methods: {
      loadMore() {
        this.rangeNumber += 15
        // do something
      },
    },
  }
</script>

<style lang="scss" scoped></style>