极客观点
项目管理
HarmonyOS
element-ui @2.15.6
如题
实现 无限滚动 之后，无法横向滚动
原因已经知道了，是因为给 .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，减少一下开发成本。