element-ui 表格固定表头实现无线加载

1、给el-table设置height即可实现固定表头

2、布局，通过flex布局，为el-table父盒子设置flex-grow: 1;即可实现撑满剩下的空间，设置el-table的height为100%，el-table撑满父盒子

3、自定义指令

export default {
  // 监听表格滚动
  directives: {
    loadmore: {
      bind(el, binding) {
        const selectWrap = el.querySelector(".el-table__body-wrapper");
        let elScrollLeft = 0;
        selectWrap.addEventListener("scroll", function () {
          // 判断是否是横向滚动
          if (this.scrollLeft != elScrollLeft) {
            elScrollLeft = this.scrollLeft;
            return;
          }
          const scrollDistance =
            this.scrollHeight - this.scrollTop - this.clientHeight;
          if (scrollDistance <= 0.5) {
            binding.value(); //执行在使用时绑定的函数，在这里即loadMor方法
          }
        });
      },
    },
  },
}

4、给el-table绑定自定义指令

<el-table
        :data="List"
        height="100%"
        v-loadmore="loadMore"
        @row-click="rowClick"
      > </el-table>

 5、定义loadMore方法

//在这里增加页数调用接口
    loadMore() {
      console.log("触底");
      this.concatSearch;//触底调用接口，页数加一，数据增加到原来的数据里
    },