遇到的问题2数据量过大导致页面卡死 2.loash.isEqual .....................

数据量过大导致页面卡死

1)写个vue指令，给table滚动区域添加指令，绑定方法，达到要求，就滚动加载数据
// directive.js文件
Vue.directive('loadMore', {
  bind(el, binding) {
    const bodyWrapper = el.querySelector('.el-table__body-wrapper')
    bodyWrapper.addEventListener('scroll', function() {
      const scrollDistance = this.scrollHeight - this.scrollTop - this.clientHeight
      // 触底加载下一页
      if (scrollDistance <= 10) {
        binding.value()
      }
    })
  }
})
------------------------------------------------
main.js
…………
import * as directives from '@/directive'
 
// 注册
Vue.use(directives)
-----------------------------------------------
<template>
    <el-table
       :data="tableData"
       v-loadMore="loadMore"
    >
        ………………
    </el-table>
</template>
 
<script>
export default {
    data() {
        allData: [], // 所有数据
        tableData: [], // 当前显示的数据
        pageNum: 1,   // 当前页数
        pageSize: 10  // 一次性展示多少条数据
    }
    methods: {
        loadMore() {
          if (this.pageNum * this.pageSize < this.allData.length) {
            this.pageNum++
            this.tableData= this.allData.slice(0, this.pageNum * this.pageSize)
          }
        }
 
    }
}
</script>
2)利用插件pl-table

2.loash.isEqual