Taro+vue 微信小程序中使用原生table和样式_taro table

注意：head的数量与table-td中的数量一致，且字段顺序不能变，且width对应，且parent的width是子列宽度之和

<scroll-view :scroll-x="true">
        <view class="t-table">
          <view class="t-head">
            <view class="table-tr">
              <view
                v-for="(item, index) in tableConfig.head"
                :key="index"
                class="table-th"
                :style="{padding: !!item.parent ? '0' : '', width: item.width || item.parent.width}"
              >
                <template v-if="!item.parent">{{item.name}}</template>
                <template v-else>
                  <view>{{item.parent.name}}</view>
                  <view
                    v-for="(item2, index2) in item.child"
                    :key="index2"
                    class="table-th"
                    :style="{width: item2.width}"
                  >{{item2.name}}</view>
                </template>
              </view>
            </view>
          </view>

          <view class="t-body">
            <view
              v-for="(item, index) in tableData"
              :key="index"
              class="table-tr"
              :style="{backgroundColor: item.sort === '合计' ? '#FDF2F2' : item.isSum == '1' ? '#F4F9FF' : ''}"
            >
              <view class="table-td" style="width: 100px; color: rgba(0,0,0,0.5); fontSize: 14px">{{item.sort}}</view>
              <!-- <view class="table-td" style="width: 100px; color: rgba(0,0,0,0.5); fontSize: 14px">{{index + 1}}</view> -->
              <view class="table-td" style="width: 120px">{{item.a}}</view>
              <view class="table-td" style="width: 120px">{{item.a}}</view>
              <view class="table-td" style="width: 120px">{{item.a}}</view>
              <view class="table-td" style="padding: 0">
                <view class="table-td" style="width: 120px">{{item['合并列'].a}}</view>
                <view class="table-td" style="width: 120px">{{item['合并列'].b}}</view>
              </view>
              <view class="table-td" style="padding: 0">
                <view class="table-td" style="width: 130px">{{item.aa}}</view>
                <view class="table-td" style="width: 120px">{{item.bb}}</view>
              </view>
            </view>
          </view>
        </view>
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

tableConfig: {
        head: [
          {name: '序号', width: '100px'},
          {name: '时间', width: '120px'},
          {name: '名称', width: '120px'},
          {name: '地区', width: '120px'},
          {parent: {name: '合并列的title', width: '240px'},
            child: [{name: '子列1', width: '120px'},{name: '子列2', width: '120px'}]},
          {parent: {name: '合并列的title', width: '250px'}, child: [{name: '子列1', width: '130px'},{name: '子列2', width: '120px'},]},
        ]
      },
1
2
3
4
5
6
7
8
9
10
11

  scroll-view {
    white-space: nowrap;
    height: auto;
  }

 .t-table {
    display: table;
    width: 100%;
    border-collapse: collapse;
    // overflow-x: auto;
    margin-top: 20px;
    table-layout: fixed;
    box-sizing: border-box;
  }
  .t-head {
    display: table-header-group;
    font-size: 24px;
    color: rgba(0,0,0,0.5000);
    background-color: #F4F9FF;
    box-sizing: border-box;
  }
  .t-body {
    display: table-row-group;
    box-sizing: border-box;
  }
  .table-tr {
    display: table-row;
    width: 100%;
    height: 80px;
    line-height: 80px;
    text-align: center;
    box-sizing: border-box;
  }
  .table-th, .table-td {
    display: table-cell;
    min-width: 200px;
    font-size: 32px;
    padding: 20px;
    border: 1px solid #eee;
    text-align: center;
    vertical-align: middle;
    box-sizing: border-box;
  }
  .table-th {
    font-weight: 600;
  }
  .table-td {
    font-weight: 500;
    white-space: pre-wrap;
    line-height: normal;
    .table-td {
      border: none;
    }
  }
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