首页 > 其他分享 >记录一次前端表格选型过程

记录一次前端表格选型过程

时间:2023-11-01 10:32:44浏览次数:36  
标签:tableWrapper SpreadJS 函数 表格 公式 前端 Excel 选型 加载


客户需求:

最近,接到一个客户项目,前期沟通时,客户说,我们日常基本都是使用Excel来做一些信息收集。但是每次收集信息时,都需要文件传来传去,十分麻烦。本来是想着用一些云文档,但是沟通下来领导层没通过,主要原因是:

(1)内部文件安全级别高,信息不能托管在其它三方平台上,这就需要对云文档做私有化部署,了解下来,费用严重超过预算。

(2)云文档可以批量上传,但无法批量下载,如果有一天集团不再使用云文档,则下载文档工作量会比较大。

(3)填写数据时,不同角色填报数据区域可能有所差异,云文档目前只能做到划分一整个表单上的权限,无法细化到单元格。

遇到的困难

初步沟通完成后,觉得这个需求没问题。直接开始先POC,后续给客户演示。项目开发上,前端采用的是Element-plus+vue3+ts。之所以选型Element-plus,是因为用户核心是表格填报,而Element-Plus具备比较出色的表格能力。POC阶段,首先应用的是Element-plus的table表格,实现了数据展示、填报、排序等需求。完成之后,就等着给客户演示了。but,这次演示相当不顺利,主要出现了以下几点问题:

  1. 客户实际文件数据量比较大,单页展示数据超过千条时,会出现滚动不流畅、编辑卡顿的问题。

(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

相关文章

  • 二、搭建前后端分离的自动化测试平台的前端Vue3+Element-plus前端项目
    一、安装Node.js以及配置环境变量1、Node获取地址https://nodejs.org/en/download一直默认选项安装,安装好了之后,在环境变量中会自动配置Node的地址,可以在cmd中使用node-v/npm-v命令验证是否下载成功2、设置Node的配置内容(1)在安装目录下新建两个文件夹命名为node_cache,和no......
  • 前端大文件切片上传,断点续传、秒传等解决方案,vue中使用实例
    先看逻辑如何切片?如何获取文件唯一hash?与后端交互获取文件上传的状态,用于判断情况,是秒传还是续传?上传切片文件,判断失败文件重新执行?全部上传完成通知后端?1、先上全部代码,后面第2部分解析、第3部分vue中使用相关依赖spark-md5主要用于拿取文件的md5mitt发布订阅importSparkMD5......
  • OpenHarmony 表格
    ArkUI没有表格,搞一个简单的 importresourceManagerfrom'@ohos.resourceManager';importpromptfrom'@ohos.prompt';@Entry@ComponentstructIndex{@Statemessage:string='HelloWorld'@StatescreenWidth:number=700@Sta......
  • Spring Boot - ffmpeg 获得 m3u8 列表和 ts 文件,前端请求视频流进行播放
    安装ffmpegFFmpeg下载地址:GitHubreleases。请下载:ffmpeg-master-latest-win64-gpl-shared.zip压缩包。解压到你系统盘任意位置(前提是你以后找得到这玩意儿在哪)。接下来就是配置其环境变量,所有的环境变量都是配置它的启动文件的路径到你系统的Path,基本上都是(也有例外的?)。如......
  • 解题报告 P3704 [SDOI2017] 数字表格
    P3704[SDOI2017]数字表格经典莫反。题目要求:\[\prod_{i=1}^n\prod_{j=1}^mfib(\gcd(i,j))\]不妨令\(n<m\)。套路地,我们设\(\gcd(i,j)=d\),然后枚举\(d\):\[\begin{aligned}&\quad\prod_{d=1}^n\prod_{i=1}^n\prod_{j=1}^mfib(d)^{[\gcd(i,j)==d]}\\&=\pr......
  • Python自动化办公——3个Excel表格中每个门店物品不同,想要汇总在一起(方法二)
    大家好,我是皮皮。一、前言前几天在Python白银交流群【上海新年人】问了一个Python自动化办公处理的问题,一起来看看吧。上一篇文章中,我们已经看到了两种解决办法了,这一篇文章我们一起来看看另外一种方法。二、实现过程这里【瑜亮老师】另外再给了一个代码和思路,如下所示:#读......
  • # yyds干货盘点 # Python自动化办公——3个Excel表格中每个门店物品不同,想要汇总在一
    大家好,我是皮皮。一、前言前几天在Python白银交流群【上海新年人】问了一个Python自动化办公处理的问题,一起来看看吧。上一篇文章中,我们已经看到了两种解决办法了,这一篇文章我们一起来看看另外一种方法。二、实现过程这里【瑜亮老师】另外再给了一个代码和思路,如下所示:#读取Excel......
  • 第十章、web前端架构师
    目录二十二、大型项目的编译,部署以及性能优化1、前言二十二、大型项目的编译,部署以及性能优化1、前言......
  • Chrome浏览器查看前端参数
    按F12或者右键点击“检查”进入开发者模式。点击这个箭头图标,即可选择要查看参数的区域。 查看表格的行高和列宽当鼠标移到某区域,就会出现浮层,显示此区域的长和宽 查看字体和字号在搜索栏搜索关键字“font-size”可找到字号 ......
  • 网页CAD(web cad sdk)前端直接获取修改转换后的图纸数据
    前言有用户集成网页CAD之后,需要提取图纸的各种信息和数据,下面我们讲一下Web版CAD如何在前端直接提取修改和转换后的图纸信息,没有集成过在线CAD的小伙伴可以先看一下快速入门在mxcad中转换后的图纸(.mxweb格式的文件)可以通过mxcadnpm包得到图纸的各种数据,如图层、文字样式、图......