前端怎么实现一个复杂表格？

前言

甲方要求前端实现一个表格，这个表格要拥有如下功能：

1. 点击行列可编辑
2. 可以导出为表格
3. 在线编辑后要实时更新到后端数据库

具体如下图：

ps：灰色部分为固定值部分

个人吐槽： 是只是个大学还没毕业，练习时长不到一个月的前端实习生，不爱打篮球...呸，说多了，心里只有MMP，一脸懵，咋办嘛，就只有硬着头皮写

准备

笔者在之前，从未接触过这种复杂表格。于是乎，面对百度编程开始！搜索了大半天，找了几个可能可以实现的方法。

1. 手写
2. vxe-table
3. easytable
4. lb-element-table

开始

笔者选择了vxe-table，然后动手写。

写了之后才明白有多难受！！！！！

这些所谓的好用到爆的组件，其实好像都是要自己去实现跨行列的逻辑。（哈哈哈，这应该是很正常的，小小吐槽一下）

跨行的思考

其实跨列一点都不难，难的是跨列。怎么做到一条数据的后几个值分成四行？

一开始，我想的是在后面几个格子里嵌套表格，用表格制裁表格。试了一下，没成功，不知道是不是我自己的问题。接着，想把前面的数据进行跨行处理，前面的数据跨四行，听起来好像是很不错的。。实现起来，emmm 不说了 ，上我的效果图和代码

大概就是这个样子的吧，这里我只做了前面几行的合并，因为没给值，所以有点问题。

说实话，这个做的很垃圾，但是不知道咋办 所以，本文，其实是一个求助帖！！！ 大佬们，赐我力量！！！ 我解决后会更新实际代码。。 下面的是最垃圾的代码

colspanMethod({ row, $rowIndex, column, columnIndex, data }) {
    if (row.id === '一' || row.id === '（一）') {
                if (columnIndex === 1) {
                    return {
                        rowspan: 1,
                        colspan: 3
                    };
                }
                if (columnIndex === 2) {
                    return {
                        rowspan: 1,
                        colspan: 22
                    };
                }
            } else {
                const fields = ['id','name','html','investEstimate','startDate','endDate']
                const cellValue = XEUtils.get(row, column.property)
                if (cellValue && fields.includes(column.property)) {
                    const prevRow = data[$rowIndex - 1]
                    let nextRow = data[$rowIndex + 1]
                    if (prevRow && XEUtils.get(prevRow, column.property) === cellValue) {
                        return { rowspan: 0, colspan: 0 }
                    } else {
                        let countRowspan = 1
                        while (nextRow && XEUtils.get(nextRow, column.property) === cellValue) {
                            nextRow = data[++countRowspan + $rowIndex]
                        }
                        if (countRowspan > 1) {
                            return { rowspan: countRowspan, colspan: 1 }
                        }
                    }
                }
            }
        }