react table rowspan小记

发表于 | 分类于 | 阅读次数：

react table rowspan小记

理解表格跨行实现，重点掌握下rowspan

定义和用法

rowspan 属性规定单元格可横跨的行数。

1
<td rowspan="value">

react代码实现

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
// react 组件部分代码
getTableData = () => {
    const data = [
      {
        name: '上衣',
        children: [
          { name: '红色', childChildren: ['L', 'XL', 'XXL'] },
          { name: '白色', childChildren: ['L', 'XL', 'XXL'] },
          { name: '黑色', childChildren: ['L', 'XL', 'XXL'] },
          { name: '绿色', childChildren: ['L', 'XL', 'XXL'] },
        ]
      },
      {
        name: '牛仔裤',
        children: [
          { name: '红色', childChildren: ['L', 'XL', 'XXL'] },
          { name: '白色', childChildren: ['L', 'XL', 'XXL'] },
          { name: '黑色', childChildren: ['L', 'XL', 'XXL'] },
          { name: '绿色', childChildren: ['L', 'XL', 'XXL'] },
        ]
      },
      {
        name: '鞋子',
        children: [
          { name: '红色', childChildren: ['L', 'XL', 'XXL'] },
          { name: '白色', childChildren: ['L', 'XL', 'XXL'] },
          { name: '黑色', childChildren: ['L', 'XL', 'XXL'] },
          { name: '绿色', childChildren: ['L', 'XL', 'XXL'] },
        ]
      },
    ];
    const rowData = [];
    data.forEach((firstItem, firstIndex) => {
      const firstRowSpan = firstItem.children.reduce((total, curItem) => total + curItem.childChildren.length, 0);  // 重点: 第一列"名称"的rowspan值，取决于最小单元的行数
      firstItem.children.forEach((secondItem, secondIndex) => {
        const secondRowSpan = secondItem.childChildren.length; // 重点: 第二列"颜色"的rowspan值，取决于它子集的行数（以此类推）
        secondItem.childChildren.forEach((thirdItem, thirdIndex) => {
          const tdData = [];
          if (secondIndex === 0 && thirdIndex === 0) {  // 重点：判断第一列"名称"是否需要插入对应dom
            tdData.push(<td className={styles.td} rowSpan={firstRowSpan}>{firstItem.name}</td>)
          }
          if (thirdIndex === 0) {                       // 重点：判断第二列"颜色"是否需要插入对应dom
            tdData.push(<td className={styles.td} rowSpan={secondRowSpan}>{secondItem.name}</td>)
          }
          rowData.push((
            <tr key={`row${firstIndex}${secondIndex}${thirdIndex}`}>
              {
                tdData
              }
              <td className={styles.td}>{thirdItem}</td>
            </tr>
          ))
        })
      })
    })
    return rowData;
  }
  render() {
    return (
      <table className={styles.table}>
        <thead>
          <tr>
            <th className={styles.th}>名称</th>
            <th className={styles.th}>颜色</th>
            <th className={styles.th}>规格</th>
          </tr>
        </thead>
        <tbody>
          {
            this.getTableData()
          }
        </tbody>
      </table>
    )
  }
  
  
// css

table{
  border: 1px solid black !important;
  border-bottom: 0px;
  border-right: 0px;
  border-collapse: collapse;
  width: 100%;
  height: 100%;
  th{
    text-align: center;
    padding: 6px 0;
    border: 1px solid black !important;
    font-size: 8px;
    color: #4D4D4D;
    letter-spacing: 0.11px;
    line-height: unset!important;
  }
  td{
    padding:6px 0;
    border: 1px solid black !important;
    font-size: 8px;
    color: #4D4D4D;
    letter-spacing: 0.11px;
    line-height: unset!important;
  }
}

个人理解图（自绘，欢迎批评指正）

操作效果图

跨行期望效果图






































tabl






















































名称 颜色 规格
上衣 红色 L
XL
XXL
白色 L
XL
XXL
黑色 L
XL
XXL
绿色 L
XL
XXL
牛仔裤 红色 L
XL
XXL
白色 L
XL
XXL
黑色 L
XL
XXL
绿色 L
XL
XXL
0%