都2025年了,作为前端的你还在手动画表格?来看看这个吧!

384 阅读3分钟

需求背景

老板:这段时间找工作的牛马比较多,我们系统要上一个面试人员登记打印出表格!前端半天能完成不?

我:半天差不多吧!但是先要看一下模板长什么样子~

老板:行,等下发你...

过了10分钟老板发过来了,如下:

微信截图_20250430135718.png

  1. 看到这张表,首先想到的是用div+flex布局!写了大概10分钟,发现布局的结构比较多,div套div一层层的无限套娃啊!果断放弃了这个方案。
  2. 那就用grid布局,说实话这个布局用得少,只能边干边看文档。做出来第一行后果断放弃了。确实是自己太菜了,没理解这些属性,画得也比较慢。
  3. 实在不行,就用table,tr,td标签吧,回归原始。发现效果还不错,涉及到一些跨行跨列有现成的属性rowspan与colspan。简单的事情还是得回归纯真最好!

其实用table标签最大的问题就是涉及到跨行列的时候,我得一个个td去数。一不小心就多出一个,或者少一个。

最终画了半天时间,终于弄得七七八八了。这时老板正好下工位视察,看到我画好的表格说弄得不错呀。。效果挺好,再帮我画一个人员转正申请表吧。

模板如下

微信截图_20250430141811.png

找现成工具

1.其实我一开始就在想,做这种表格最专业的工具不就是excel与word吗?如果能让公司的行政部门把表格画好,再导出成HTML呢?想法很美好,就看怎么实现了,于是乎就百度呗!搜索了一大圈,不是要收费就是AI广告。根本就没有简单而又实用的。

2.找图形界面的表格生成器,在菜鸟教程里面发现了一个。www.jyshare.com/front-end/7… 满怀期待的打开,结果发现它只能绘出行与列,没办法跨行跨列。

造轮子(表格生成器)

周树人曾说过:不要重复造轮子,除非没有轮子!

首先造轮子不是我的本意,我也是被逼的。谁知道老板后续还要让我画一些啥表格呀。看这种趋势,估计会发货单,物流清单,发票,以及与行政有关的各种表格,都会要集成到系统里面。到时候如果效率跟不上,估计就会被优化了。

其实这个轮子的作用就是在图形界面上画一张基础的表格,然后手动调整单元格的跨行跨列!然后一键生成HTML代码。界面如下:

image.png

实际效果

QQ2025430-172447.gif

源码地址:github.com/zy1992829/z… 效果地址:zy1992829.github.io/zytableGene…

总结

该轮子还有不完善的地方,感兴趣的朋友可以一起参与进来优化!最后生成出来的效果还需要代码样式优化以及微调。但是大大的节省了手动写table的精力。如果觉得这篇文章对你有帮助,就点赞+收藏吧!有问题欢迎留言~