一直写到老的故事每天写1000字城市故事

脑子是个好东西

2019-06-27  本文已影响2人  鲸鲸景鲸叻

/ 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. 姑娘,加油
上一篇 下一篇

猜你喜欢

热点阅读