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

下述代码为组件实现代码复制即可食用,默认只展示 一屏数据加两条

全选存在些许问题, 使用row-key时,如果行过多滚动时会不会很流畅

特别需要注意的是 行高必须要保持一致

<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>