需求描述:
之前的表格是前端写死的,后来迭代加入大部分数据都改成可配置了,所以我想把表格也做成可配置化吧,最终效果如上图,支持跨行,一开始是不支持的,无奈运营小姐姐要,那我就给呗,男人怎么可以说不行!
一开始我的表格只支持表头及正文(也就是行,后面就叫它行)。
我的数据格式是这样的,两个数组,第一个数组是表头,第二个数组是一个二维数组表示行,有几行那就有几组数据。
{
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来强制控制,如果要支持跨列,其实也是可以的。但是还是要和小姐姐配合好!