项目需要在前端表格渲染的数据太多，导致页面另外的引入的功能有bug，需求又不想用分页来处理，需要做一个table表格的懒加载

addEventListenerTableList(){
  this.dom = this.$refs.tabList.bodyWrapper
  let i = 0 //这里设置i=0是因为在监听外面拿到的scrollHeight不对，所以需要在监听里面拿到第一次的的高度
  let firstHeight = 0
  this.dom.addEventListener('scroll', () => {
    // 滚动距离
    if (i == 1){
      firstHeight = this.dom.scrollHeight || this.dom.scrollHeight
    let scrollTop = this.dom.scrollTop
    // 变量windowHeight是可视区的高度
    let windowHeight = this.dom.clientHeight || this.dom.clientHeight
    // 变量scrollHeight是滚动条的总高度
    let scrollHeight = this.dom.scrollHeight || this.dom.scrollHeight
    if (scrollTop + windowHeight == scrollHeight){// 判断滚动条是否已经拉到了最下面
      let i = scrollHeight/firstHeight
      let sliceArrData = this.cross_table7.slice(20*i, 20*(i+1))//此处的cross_table7是存储的拿到的几万条数据，每次滚动条到最下的时候截取20条然后放到页面展示的table表格中
      this.cross_table2 = this.cross_table2.concat(sliceArrData)
** 这里的懒加载只能算是勉强应付，如果一直往下拉会导致页面table的dom元素越来越多，到时候该卡还是要卡，最简单的方法还是通过分页来避免页面卡顿，或者在懒加载下拉的时候只渲染当前能看到的那几行的dom元素，不展示的dom元素的销毁，站内有大佬的写法**
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)
新建Table.vue
主要就是tableListener()方法，监听dom的sc.
				
页面数据懒加载。Div移动到可视区域再去ajax加载内容。
最近有需求做页面的多个table用于加载数据，但是用户浏览页面的时候不需要一次将页面所有的东西加载出来，比如页面上3个table就占满了，用户点进去第一眼也就只能看到3个。为了防止一次加载拖慢了页面的速度，所以之后的table我们要懒加载。即该table移动到了可视区域再去异步请求加载数据。
以下为目前实现的方法：
<!-- page lazyloading -->
[removed]
$(function(){
  // 设置布尔值用于判断是否该DIV到达过可视区域
 var scrollflaga = true;
  // 监听滚
点击table表格中的编辑时，表格中的上级部门可以替换位置。而且添加成功后，表格之前的状态不能改变（可以理解为展开项不变）
添加子部门时，也可以替换位置，添加成功后，要求同上。
解决问题思路
首先表格和弹框中的select下拉框tree都是懒加载。
实现表格和tree的联动，思路：存一个表格展开的当前项，将这个数据传给下拉框中的tree，取出全部展开的id 赋值给tree的展开属性。
实现tree和table表格的联动，利用tree展开事件，直接调取table中的loadOrToggle方法。
				
因为项目的数据，逻辑比较复杂，所以需要在表格加载出来做一个懒加载
就是因为逻辑复杂，刚接手的项目维护有点麻烦，耽误很长时间，加上昨天对象来找我，没休息好，搞了半天，头昏脑胀的。 (主要是res的转换问题以及渲染问题)
数据分析：此项目的 数据为用户画一个圆形，筛选出图形里面包含的数据，可能多，可能少，后台没有去进行分页处理，所以前端需要自行分页
<--  css样式  -->
        <el-table 
          v-loading="loading"