脑子是个好东西

/ 2019-6-25

大厅周四上线，如期完成任务，开心~

接到一个采购特别复杂的表格的需求，脑壳疼。

给阳阳讲完需求是啥，就去改bug了，一边改，脑子里一边在想这个数据格式到底啥样的呢。

结果，越想越头疼，算了，还是专心改bug。

盯着这个表格，又盯着现有表格的数据，拿纸划拉了一会儿也没有想明白咋弄。

拿眼瞪是瞪不出个啥来了，还是先写个demo吧。

第一步，瞪出来了是现有表格的2种的结合，一个拿表头，一个拿表数据，先渲染一个数据出来看看。

最最最最简单的demo出来了，此时，思路有些清晰了。

把阳阳喊来，简单的描述了实现到目前的数据，需要后台自己去匹配排序，横着的表头和表数据没办法做关联关系，想展示对了，就得提前做好排列的顺序。前端就直接渲染即可了。

数据格式两种方案：

1. 把需要展示的字段前面加前缀，前端用前缀去筛选数据
2. 把所有需要展示的数据，收到一个字段里面key:value，value是个JSON数据

阳阳选择第二个，OK，继续模拟数据。

第二步，把竖着的表头先用最简单的方式整出来。

在调整样式的时候，发现，还是要按照表头的格式来写数据，这样保持统一性，可读性高。不给自己挖坑，以后方便读代码改bug。

第三步，form+table，先让输入框展示出来再说。

此时，数据有两种展示方案：

1. 把需要展示的数据格式调整成跟表头的格式统一，isFormItem:true来判断是input输入框
2. 就根据具体的key来判断，写死在前端

阳阳选择第二种，字段name不会变了，OK。渲染，微调样式。

第四步，最难的，form表单加校验规则。

还没写，需要梳理数据的对应关系，脑壳子疼。

脑子是个好东西，我得多吃点核桃了。

这个表格的功能点：

1. 动态表头
2. 竖表头
3. 合并行
4. 合并列
5. 固定列
6. form+table 校验
7. input 输入框相互计算，失去焦点后另外一个被禁用

单独的每一项都做过了，现在要揉吧揉吧放在一个表格里面。

1. 拆功能
2. 按照最小功能点去实现
3. 及时记录想到的思路
4. 返回去想前面做的是否合理
5. 姑娘，加油