使用element 2.14 实现表格虚拟滚动组件

<template>
  <div class="t-table" :id="TTableId">
    <el-table
      ref="el-table"
      :tooltip-effect="tooltipEffect"
      :data="tableData"
      border
      :height="height"
      :row-class-name="rowClassName"
      :key="tableKey"
      :row-key="getRowKey"
      @select-all="
        val => {
          this.selectAll(val, !isAll);
        }
      "
      @select="select"
      @current-change="handleCurrentChange"
      :highlight-current-row="highlightCurrentRow"
      :header-cell-style="headerCellStyle"
      :cell-style="cellStyle"
      :empty-text="emptyText"
      @row-click="
        (row, column, event) => this.rowClick(row, column, event, 'table')
      "
    >
      <el-table-column type="index" v-if="index" align="center" fixed>
        <template slot-scope="scope">
          {{ start > 0 ? scope.$index + start + 1 : scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column
        type="selection"
        fixed
        :reserve-selection="true"
        :width="$TableWidth.px46"
        v-if="selection"
        :selectable="rowSelectable"
      ></el-table-column>
      <slot></slot>
    </el-table>
  </div>
</template>

<script>
export default {
  components: {
  },
  name: "TTable",
  props: {
    //表格数据列表
    saveDATA: {
      typeof: Array,
      default: []
    },
    //表格高度
    height: {
      typeof: Number,
      default: 400
    },
    //一行高度 为了计算高度,需要行高固定且不能出现换行数据
    itemHeight: {
      typeof: Number,
      default: 49
    },

    rowClassName: {
      typeof: Function,
      default: () => {}
    },
    tooltipEffect: {
      typeof: String,
      default: ""
    },
    //行key 必须填写saveDATA里面的变量名
    rowKey: {
      typeof: String,
      default: ""
    },
    //是否显示复选框列
    selection: {
      typeof: Boolean,
      default: false
    },
    //是否显示序号列
    index: {
      typeof: Boolean,
      default: false
    },
    //行禁选方法
    rowSelectable: {
      typeof: Function,
      default: () => {}
    },
    //是否可以单选
    highlightCurrentRow: {
      typeof: Boolean,
      default: false
    },
    //表头样式
    headerCellStyle: {
      typeof: Object
    },
    //表格样式
    cellStyle: {
      typeof: Object
    },
    //无数据文字
    emptyText: {
      typeof: String,
      default: ""
    },
    colDisable: {
      typeof: Array
    },
    //组件id 如果一个页面需要使用多个ttable组件 需要给此参数赋唯一值
    TTableId: {
      typeof: String,
      default: "t_table"
    }
  },
  data() {
    return {
      tableData: [], //展示数据列表
      tableRef: null, // 设置了滚动的那个盒子
      tableWarp: null, // 被设置的transform元素
      fixLeft: null, // 固定左侧--设置的transform元素
      fixRight: null, // 固定右侧--设置的transform元素
      tableFixedLeft: null, // 左侧固定列所在的盒子
      tableFixedRight: null, // 右侧固定列所在的盒子
      scrollTop: 0, //滚动高度
      scrollNum: 0, //当前滚动了几屏数据  scrollTop / (itemHeight * pageList)
      scrollRowNum: 0, //记录当前滚动了多少条数据
      start: 0, //默认截取数据开始位数
      end: this.pageList + 2, //默认截取数据结束位数
      selectList: [], //当前选中的列表
      isAll: false, //是否全选
      tableKey: "", //表格key
      currentRow: "", //单选数据
    };
  },
  watch: {
    //每滚动一条数据则更改展示数据源并且更改容器偏移量
    scrollRowNum(newV) {
      this.start = newV - 1;
      this.end = this.pageList + newV + 1;
      if (this.start <= 0) this.start = 0;
      this.tableData = this.saveDATA.slice(this.start, this.end);
      if (this.currentRow) this.setCurrentRow(this.currentRow);
      requestAnimationFrame(() => {
        // 计算偏移量
        let translateY = `translateY(${this.start * this.itemHeight}px)`;
        this.tableWarp.style.transform = translateY;
        if (this.fixLeft) {
          this.fixLeft.style.transform = translateY;
        }
        if (this.fixRight) {
          this.fixRight.style.transform = translateY;
        }
        this.doLayout();
      });
    },
 
    saveDATA: {
      handler(val) {
        this.init();
        this.initMounted();
      },
      deep: true // 深度监听
    },
    pageList() {
      this.init();
      this.initMounted();
    }
  },
  created() {
  },
  mounted() {
    this.$nextTick(() => {
      this.tableSetRef = this.GetTableRef();
    });
  },
  methods: {
    clearIndex() {
      this.start = 0;
      this.end = this.pageList + 2; 
      this.scrollNum = 0;
      if (this.tableRef) this.tableRef.scrollTop = 0;
    },
    //初始化表格内容盒子
    initMounted() {
      this.$nextTick(() => {
        let box = document.getElementById(this.TTableId);
        // 设置了滚动的盒子
        this.tableRef = this.$refs["el-table"].bodyWrapper;
        // 左侧固定列所在的盒子
        this.tableFixedLeft = box.querySelector(
          ".el-table .el-table__fixed .el-table__fixed-body-wrapper"
        );
        // 右侧固定列所在的盒子
        this.tableFixedRight = box.querySelector(
          ".el-table .el-table__fixed-right .el-table__fixed-body-wrapper"
        );
        /**
         * fixed-left | 主体 | fixed-right
         */
        // 创建内容盒子divWarpPar并且高度设置为所有数据所需要的总高度
        let dwp = box.getElementsByClassName("divWarpPar")[0];
        if (dwp) {
          dwp.style.height = this.saveDATA.length * this.itemHeight + "px";
        } else {
          let divWarpPar = document.createElement("div");
          divWarpPar.className = "divWarpPar";
          // 如果这里还没获取到saveDATA数据就渲染会导致内容盒子高度为0，可以通过监听saveDATA的长度后再设置一次高度
          divWarpPar.style.height =
            this.saveDATA.length * this.itemHeight + "px";
          // 新创建的盒子divWarpChild
          let divWarpChild = document.createElement("div");
          divWarpChild.className = "fix-warp divWarpChild";
          // 把tableRef的第一个子元素移动到新创建的盒子divWarpChild中
          divWarpChild.append(this.tableRef.children[0]);
          // 把divWarpChild添加到divWarpPar中，最把divWarpPar添加到tableRef中
          divWarpPar.append(divWarpChild);
          this.tableRef.append(divWarpPar);
        }
        // left改造
        let dlp = box.getElementsByClassName("divLeftPar")[0];
        if (dlp) {
          dlp.style.height = this.saveDATA.length * this.itemHeight + "px";
        } else {
          let divLeftPar = document.createElement("div");
          divLeftPar.className = "divLeftPar";
          divLeftPar.style.height =
            this.saveDATA.length * this.itemHeight + "px";
          let divLeftChild = document.createElement("div");
          divLeftChild.className = "fix-left";
          this.tableFixedLeft &&
            divLeftChild.append(this.tableFixedLeft.children[0]);
          divLeftPar.append(divLeftChild);
          this.tableFixedLeft && this.tableFixedLeft.append(divLeftPar);
        }
        // right改造
        let drp = box.getElementsByClassName("divRightPar")[0];
        if (drp) {
          drp.style.height = this.saveDATA.length * this.itemHeight + "px";
        } else {
          let divRightPar = document.createElement("div");
          divRightPar.className = "divRightPar";
          divRightPar.style.height =
            this.saveDATA.length * this.itemHeight + "px";
          let divRightChild = document.createElement("div");
          divRightChild.className = "fix-right";
          this.tableFixedRight &&
            divRightChild.append(this.tableFixedRight.children[0]);
          divRightPar.append(divRightChild);
          this.tableFixedRight && this.tableFixedRight.append(divRightPar);
        }

        // 被设置的transform元素
        this.tableWarp = box.querySelector(
          ".el-table .el-table__body-wrapper .fix-warp"
        );
        this.fixLeft = box.querySelector(
          ".el-table .el-table__fixed .el-table__fixed-body-wrapper .fix-left"
        );
        this.fixRight = box.querySelector(
          ".el-table .el-table__fixed-right .el-table__fixed-body-wrapper .fix-right"
        );
        this.tableRef.addEventListener("scroll", this.onScroll);
      });
    },
    // 初始化数据
    init() {
      this.clearIndex();
      this.tableData = this.saveDATA.slice(this.start, this.end);
    },
    // 滚动事件
    onScroll() {
      //解决固定行 与 非固定行 滚动时错位问题
      let body = document.getElementById(this.TTableId);
      let fixedBox = body.getElementsByClassName(
        "el-table__fixed-body-wrapper"
      );
      if (fixedBox) {
        for (let i = 0; i < fixedBox.length; i++) {
          const element = fixedBox[i];
          element.scrollTop = this.tableRef.scrollTop;
        }
      }
      //,
      this.scrollTop = this.tableRef.scrollTop; //获取顶部距离
      this.scrollNum =
        Math.floor(this.scrollTop / (this.itemHeight * this.pageList)) + 1; //计算滚动到几屏数据
      this.scrollRowNum = Math.ceil(this.scrollTop / this.itemHeight); //计算已经滚动了多少条数据
      //移除掉滚动时遗留的hover-row
      if (this.GetTableRef()) {
        const elements = body.getElementsByClassName(
          "hover-row"
        );
        for (let i = 0; i < elements.length; i++) {
          elements[i].classList.remove("hover-row");
        }
      }
    },
    //获取表格ref
    GetTableRef() {
      return this.$refs["el-table"];
    },
    //刷新表格key
    RefreshTableKey() {
      this.tableKey = this.$common.GetNextStr();
      this.clearIndex();
      this.initMounted();
    },
    //设置行key
    getRowKey(row) {
      return this.$common.GetValueByPath(row, this.rowKey);
    },
    //单行选择触发事件
    select(val) {
      this.selectList = val;
      this.$emit("selection-change", val);
    },
    //全选触发事件
    selectAll(val, isAll) {
      this.isAll = isAll;
      if (isAll) {
        let list = JSON.parse(JSON.stringify(this.saveDATA));
        if (this.rowSelectable)
          this.selectList = list.filter((m, i) => this.rowSelectable(m, i));
        else this.selectList = list;
        let dList = this.selectList.filter(
          m => val.findIndex(k => JSON.stringify(k) == JSON.stringify(m)) == -1
        );
        dList.forEach(row => {
          this.GetTableRef().toggleRowSelection(row);
        });
      } else {
        this.clearSelection();
      }
      this.$emit("selection-change", this.selectList);
    },
    //清空表格
    clearSelection() {
      this.GetTableRef().clearSelection();
      this.selectList = [];
      this.$emit("selection-change", this.selectList);
    },

    //单行选中触发事件
    handleCurrentChange(val) {
      this.currentRow = val;
      this.$emit("current-change", val);
    },
    //设置指定行为单行选中
    setCurrentRow(row) {
      this.currentRow = row;
      this.GetTableRef().setCurrentRow(row);
    },
    rowClick(row, column, event) {
      this.$emit("row-click", row, column, event);
    },
    //重新布局表格
    doLayout() {
      this.GetTableRef().doLayout();
    },


  },
  computed: {
    pageList() {
      return Math.ceil(this.height / this.itemHeight);
    }
  }
};
</script>
<style>
.t-table .el-table__body-wrapper {
  overflow: auto !important;
  background-blend-mode: overlay !important;
}
</style>

<template>
  <div class="t-table" id="t_table">
    <TTable :saveDATA="saveDATA" :height="200">
      <el-table-column fixed label="id" prop="id"></el-table-column>
      <el-table-column  fixed label="姓名" prop="name"></el-table-column>
      <el-table-column label="年龄" prop="age"></el-table-column>
      <el-table-column
        label="地址"
        prop="address"
        min-width="300"
      ></el-table-column>
      <el-table-column
        label="地址"
        prop="address"
        min-width="300"
      ></el-table-column>
      <el-table-column
        label="地址"
        prop="address"
        min-width="300"
      ></el-table-column>
      <el-table-column
        label="地址"
        prop="address"
        min-width="300"
      ></el-table-column>
      <el-table-column
        label="地址"
        prop="address"
        min-width="300"
      ></el-table-column>
      <el-table-column
        label="地址"
        prop="address"
      min-width="300"
      ></el-table-column>
    </TTable>
  </div>
</template>

<script>
import TTable from "../../../src/components/TTable.vue";
export default {
  components: {
    TTable,
  },
  props: {},
  data() {
    return {
      saveDATA: [], // 所有数据
    };
  },
  watch: {},
  created() {

  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      this.saveDATA = [];

      for (let i = 0; i < 2000; i++) {
        this.saveDATA.push({
          id: i,
          name: `张三${i}`,
          age: i,
          address: "重庆市渝中区两路口阿士大夫撒多富士达浪费的水立方as的裂缝阿萨德立法技术放两三分啥地方了as的裂缝as了巅峰就啥的立法啥的立法阿斯蒂芬了as的裂缝就啥砥砺奋进阿萨德理发店发了"
        });
      }
    }
  }
};
</script>