客户需求:
最近,接到一个客户项目,前期沟通时,客户说,我们日常基本都是使用Excel来做一些信息收集。但是每次收集信息时,都需要文件传来传去,十分麻烦。本来是想着用一些云文档,但是沟通下来领导层没通过,主要原因是:
(1)内部文件安全级别高,信息不能托管在其它三方平台上,这就需要对云文档做私有化部署,了解下来,费用严重超过预算。
(2)云文档可以批量上传,但无法批量下载,如果有一天集团不再使用云文档,则下载文档工作量会比较大。
(3)填写数据时,不同角色填报数据区域可能有所差异,云文档目前只能做到划分一整个表单上的权限,无法细化到单元格。
遇到的困难
初步沟通完成后,觉得这个需求没问题。直接开始先POC,后续给客户演示。项目开发上,前端采用的是Element-plus+vue3+ts。之所以选型Element-plus,是因为用户核心是表格填报,而Element-Plus具备比较出色的表格能力。POC阶段,首先应用的是Element-plus的table表格,实现了数据展示、填报、排序等需求。完成之后,就等着给客户演示了。but,这次演示相当不顺利,主要出现了以下几点问题:
- 客户实际文件数据量比较大,单页展示数据超过千条时,会出现滚动不流畅、编辑卡顿的问题。
(2)Element-plus table数据量稍大时,排序功能耗时严重。
(3)由于业务人员习惯使用Excel,Excel中用公式可以实现单元格计算、统计,希望能复用此类功能。
前两个需求其实都比较好解决,Element-plus新推出了一个表格组件——Virtual Table。
使用Virtual Table通过分页加载和虚拟滚动来处理大数量数据的流畅加载:
<script>
export default {
data() {
return {
tableData: [], // 所有数据
visibleData: [], // 可见数据
loading: false, // 加载状态
currentPage: 1, // 当前页码
itemsPerPage: 500, // 每页显示数量
tableHeight: 400 // 表格高度
};
},
created() {
this.loadData(); // 初始化加载数据
},
methods: {
loadData() {
this.loading = true;
// 模拟异步加载数据
setTimeout(() =\> {
// 这里替换为实际的加载数据逻辑,可以从后端接口获取数据
// 注意:对于大数据量,最好进行分页加载,只加载当前页的数据
const startIndex = (this.currentPage - 1) \* this.itemsPerPage;
const endIndex = this.currentPage \* this.itemsPerPage;
this.tableData = this.generateData(startIndex, endIndex);
this.loading = false;
}, 2000);
},
generateData(startIndex, endIndex) {
// 这里只是一个示例,生成一些虚拟的数据
const data = [];
for (let i = startIndex; i \< endIndex; i++) {
data.push({
name: `用户${i}`,
age: Math.floor(Math.random() \* 100),
address: `地址${i}`
});
}
return data;
},
handleScroll() {
const tableWrapper = document.querySelector(".el-table__body-wrapper");
if (tableWrapper.scrollTop + this.tableHeight >= tableWrapper.scrollHeight) {
// 当滚动到底部时,加载下一页数据
this.currentPage++;
this.loadData();
}
}
},
mounted() {
const tableWrapper = document.querySelector(".el-table__body-wrapper");
tableWrapper.addEventListener("scroll", this.handleScroll);
},
beforeDestroy() {
const tableWrapper = document.querySelector(".el-table__body-wrapper");
tableWrapper.removeEventListener("scroll", this.handleScroll);
}
};
</script>
这个组件的性能确实是比较惊喜,能实现百万内数据流畅加载,并且在筛选、排序、编辑上也有着十分出色的性能。第三个需求,可以通过使用js或者java开发相关的计算公式,基本也能解决。于是,又开始新的一轮POC。两周之后,满心欢喜的再次去给客户演示。本次演示,性能上几乎没什么问题,但业务给出的反馈直接致命:
(1)这个和Excel操作习惯很不相似,不好用
标签:tableWrapper,SpreadJS,函数,表格,公式,前端,Excel,选型,加载 From: https://blog.51cto.com/powertoolsteam/8119559