使用原生table合并单元格

先上个我要实现的页面

例子1: 

使用原生table合并单元格_第1张图片

就是最近要开发这么一个页面(这是个原型图,没有美化,大概是这个样子也都懂),刚看到的时候说实话有点儿懵的,第一次见到这样的表格,可以看到里面有很多字段,将来后台会一个个的返回给我们,其中右侧的原因是可编辑的!下面的调度主任和填写人也都是可编辑的,其他的都是后台会返回给我们的字段了,并且可以导出

这咋整呢,看着就烦,里面乱糟糟的,闹心。

然后开始的时候我是用 element-ui中的el-table试试的,结果合并的时候,我发现数据都乱了,列行的对不上号了,就给我搞的有点儿烦,有点儿整不下去了

后来我就用的原生的table,一个个写出来,这法子确实有点儿笨,写的也很多,但是好处就是能实现。。。另外还比较灵活,可以任意自定义操作每个单元格,所以就用了原生table

先给大家上个我最终做出的页面

你可能感兴趣的:(前端,vue,vue.js,javascript,表格)