css-grid布局实现一个复杂表格

发表于 | 分类于 ，

产品设计了这样一个表格，如下图：
在这里插入图片描述
当然表格内容格式是固定的，本来想用element ui的，但是思考了一下，用el-table好像嵌套的比较麻烦，还要合并单元格，所以采用了grid布局。
废话不多说，直接上代码：

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
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
<template>
  <div class="table">
    <!-- 表头1 -->
    <div class="th">类型名称</div>
    <div class="th">类型</div>
    <div class="th">标签</div>
    <div class="th">标签编码</div>
    <div class="th">标准定额（元/吨）</div>
    <div class="td td-9">a</div>
    <!-- 一行 -->
    <div class="td td-2">a</div>
    <div class="td">b</div>
    <div class="td">BHGZ</div>
    <div class="td">
      <el-input></el-input>
    </div>
    <!-- 一行 -->
    <div class="td">c</div>
    <div class="td">BHGL</div>
    <div class="td">
      <el-input></el-input>
    </div>
    <!-- 表头2 -->
    <div class="th">
      <div>条件层级</div>
      <div>条件类型</div>
    </div>
    <div class="th">标签</div>
    <div class="th">编码</div>
    <div class="th">浮动金额（±xx/元）</div>
    <!-- 一行 -->
    <div class="td">
      <div>a</div>
      <div>对接</div>
    </div>
    <div class="td">主体对接</div>
    <div class="td">ZTDJ</div>
    <div class="td">
      <el-input></el-input>
    </div>
    <!-- 一行 -->
    <div class="td td-3">
      <div>二级</div>
      <div>重量占比</div>
    </div>
    <div class="td" v-text="'占比≥10%，<20%'"></div>
    <div class="td">LJZB1</div>
    <div class="td">
      <el-input></el-input>
    </div>
    <!-- 一行 -->
    <div class="td" v-text="'占比≥20%，<30%'"></div>
    <div class="td">LJZB2</div>
    <div class="td">
      <el-input></el-input>
    </div>
    <!-- 一行 -->
    <div class="td" v-text="'占比≥30'"></div>
    <div class="td">LJZB3</div>
    <div class="td">
      <el-input></el-input>
    </div>
    <!-- 一行 -->
    <div class="td td-2">
      <div>三级</div>
      <div>张三</div>
    </div>
    <div class="td">mmm</div>
    <div class="td">线</div>
    <div class="td">
      <el-input></el-input>
    </div>
    <!-- 一行 -->
    <div class="td">kkk</div>
    <div class="td">线</div>
    <div class="td">
      <el-input></el-input>
    </div>
  </div>
</template>
<script>
</script>
<style lang="scss" scoped>
.table {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  border-top: 1px solid #f3f4f5;
  border-left: 1px solid #f3f4f5;
  margin-bottom: 16px;
  font-size: 14px;
  grid-auto-rows: 48px; //额外的行高统一
  .td {
    display: flex;
    align-items: center;
    padding: 0 16px;
    border-bottom: 1px solid #f3f4f5;
    border-right: 1px solid #f3f4f5;
    @for $i from 1 through 15 {
      &-#{$i} {
        grid-row-start: span $i;
      }
    }
    > div {
      flex: 1;
      &:last-child {
        padding-left: 16px;
      }
    }
    // &-2 {
    //   grid-row-start: 2;
    //   grid-row-end: 4;
    //   grid-row-start: span 2;
    // }
  }
  .th {
    display: flex;
    align-items: center;
    background: #eff0f2;
    border-bottom: 1px solid #f3f4f5;
    padding: 0 16px;
    > div {
      flex: 1;
    }
  }
}
</style>

就可以实现产品所需的效果了，也庆幸产品的表格是固定的，没有新增删除啥的，要不然真的麻瓜了。。。
上面代码中td-2就代表合同两行，已经配置成动态的了，最多可以写到15行。
这个需求也再次认识了grid中几个新的api:

  1. grid-auto-rows: 48px; //额外的行高统一
    本来是用的grid-template-rows: repeat(13, 48px);但是因为有多个类似表格，行数直接写死的话，不太合适，就发现了这个上面方法，可以替代。
  2. grid-row-start: span 2;
    刚开始合并行是用下面这个代码：
1
2
grid-row-start: 2;
grid-row-end: 4;

但是这种写法不能通用，发现上面这个方法更好。
阮易峰老师的grid布局