element-ui，el-table组件实现虚拟滚动后，无法横向滚动？

  • Z时代
  • 2024-02-26
  • 分类：IT

element-ui @2.15.6

如题
element-ui，el-table组件实现虚拟滚动后，无法横向滚动？

实现 无限滚动 之后，无法横向滚动
原因已经知道了，是因为给 .el-table__body 设置了 position: absolute 导致的，但是如果不设置 定位 就无法实现虚拟滚动（按照个人目前的技术储备）。

部分代码：

<el-table
  :data="visibleList"
  border
  stripe
  class="data-search-table"
  ref="dataTable"
  :cell-style="{ 'text-align': 'center' }"
  :header-cell-style="{ 'text-align': 'center' }"
  height="700"
  v-loading="dataTableLoading"
  element-loading-text="加载数据中"
  element-loading-spinner="el-icon-loading"
  >
  <el-table-column
    label="时间"
    prop="time"
    :width="columns.length ? '160' : ''"
    fixed="left"
  />
  <el-table-column
    v-for="(item, index) in columns"
    :label="getColumnTitle(item.title)"
    :key="index"
  >
    <el-table-column
      :prop="item.title"
      :label="getColumnSubTitle(item.title)"
      min-width="160"
    >
      <template slot-scope="{ row }">
        <span :class="columnSpanClass(row)">{{
          row[item.title]
        }}</span>
      </template>
    </el-table-column>
  </el-table-column>
  <template #append>
    <div :style="{ height: `${totalHeight}px` }"></div>
  </template>
</el-table>
watch: {
  scrollTop: {
    handler(val) {
      this.$nextTick(() => {
        const start = Math.floor(val / this.itemHeight);
        this.visibleList = this.tableData.slice(start, start + 20);
        this.$refs.dataTable.$el.querySelector(".el-table__body").style.top = `${start * this.itemHeight}px`;
      });
    },
    immediate: true, // 立即以表达式的当前值触发回调
  }
},
mounted() {
  this.$refs.dataTable.bodyWrapper.addEventListener(
    "scroll", 
    this.initTableBodyWrapperScroll
  );
},
methods: {
  initTableBodyWrapperScroll: debounce(function (e) {
    this.scrollTop = e.target.scrollTop;
  }, 16)
}
<style lang="scss" scoped>
::v-deep {
  .el-table.data-search-table {
    .el-table__body-wrapper {
      height: 100% !important;
      .el-table__body {
        position: absolute;
      }
    }
  }
}
</style>

因为前几天问过相关的问题，数据量在 几w+，已经很卡了，必须要优化了

目前解决方案：前端实现分页，不使用虚拟滚动（大概率会被pass，后端涉及逻辑较多，也不好改）

需求就是这么 s13，不可能去改变需求了

期望：
1.不希望使用分页，实现以上功能：虚拟滚动 + 横向滚动 + 动态表头

希望大佬们给个建议

回答：

虽然说前端可以做分页。但是也会因为数据返回的量太大而衍生出其他的问题。

只能说让前端去做分页的后端不是一个好后端。即使接口有很多其他的业务条件也可有很多方式来解决，而且并不麻烦。

Ele UI 的固定表头，来做虚拟滚动也会有很多问题，你提到的列太多就是其中一个，还有列对不齐的情况。
可以的话，还是换一个UI库或者大数据表格组件，毕竟 Ele 已经算是处于半废弃的状态了。

比如说可以考虑 AntD Vue 在使用的这个组件 Surely Vue，减少一下开发成本。

回答：

可以使用umy-ui库，有对大量数据做虚拟处理的。具体可以看下边网站例子。
https://www.cnblogs.com/xinta...

以上是 element-ui，el-table组件实现虚拟滚动后，无法横向滚动？ 的全部内容， 来源链接： utcz.com/p/933117.html

回到顶部