react可配置化table支持跨行跨列

需求描述：

之前的表格是前端写死的，后来迭代加入大部分数据都改成可配置了，所以我想把表格也做成可配置化吧，最终效果如上图，支持跨行，一开始是不支持的，无奈运营小姐姐要，那我就给呗，男人怎么可以说不行！

一开始我的表格只支持表头及正文（也就是行，后面就叫它行）。

我的数据格式是这样的，两个数组，第一个数组是表头，第二个数组是一个二维数组表示行，有几行那就有几组数据。

{
    thead: [{title:'手续费承担方'}, {title:'分期期数'}, {title:'费率'}],
    tbody: [
        [{text:'商户'},{text:'3期'},{text:'1.8%'}],
        [{text:'商户'},{text:'6期'},{text:'4.5%'}],
        [{text:'商户'},{text:'12期'},{text:'7.5%'}]
    ]
}

那就遍历两轮，搞定！

 

看一下我们的运营的配置系统，如下：

这里的跨行是后面做的。按照上面的数据一般的表格是可以配置完成了。但是若要支持跨行。。其实就是设置td的rowspan值（以3行3列为例），下图第一行第一列，它跨了3行，在配置时，设置跨3行。那第二行及第三行只要配置二个单元格的数据就行。这里需要跟运营小姐姐说一下。

我在做跨行之前也百度了一下，看到一个jquery版的https://blog.csdn.net/dreamsigel/article/details/76081365 ，他的写法有点写死了，我的写需要跟运营小姐姐约定好，不用一次一次去改代码了。

我再把跨行的数据格式发一下：

{
    thead: [{title:'手续费承担方'}, {title:'分期期数'}, {title:'费率'}],
    tbody: [
        [
            {text:'商户',needRowspan:true,rowspan:3},
            {text:'3期',needRowspan:false,rowspan:3},
            {text:'1.8%',needRowspan:false,rowspan:3}],
        [
            {text:'6期',needRowspan:false,rowspan:3},
            {text:'4.5%',needRowspan:false,rowspan:3}],
        [
            {text:'12期',needRowspan:false,rowspan:3},
            {text:'7.5%',needRowspan:false,rowspan:3}
        ]
    ]
}

react的代码我也写一下，

<table className="table" cellPadding="0" cellSpacing="0">
    <thead>
      <tr>
        { thead.map((head, hIdx) => <th key={`${head.title}-${hIdx}`}>{head.title}</th>)}
      </tr>
    </thead>
    <tbody>
      {
        tbody.map((body, bIdx) =>
          <tr key={bIdx}>
            {
              body.tr.map((td, tdIdx) => <td rowSpan={td.needRowspan && td.rowspan} key={`${td.text}-${tdIdx}`}>{td.text}</td>)
            }
          </tr>
        )
      }
    </tbody>
  </table>

为了减少小姐姐的误操作的，我把配置平台的相关数据格式都写死了，比如行数就是Nubmer类型，默认是0，但是配置平台对于没有设置行数也会把默认的0传过来，如果小姐姐一开始设置了行数，后面又把是否跨行取消了，这时会把设置的行数传过来单单这么写td.rowspan && td.rowspan就不对了，如果不判断needRowspan这层判断的话，html在渲染的时候就渲染成<td rowSapn='0' .../>，浏览器展示不对，自己意会。这时我就用needRowspan来强制控制，如果要支持跨列，其实也是可以的。但是还是要和小姐姐配合好！