【uniapp】table固定列

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
<!-- 表格展示 -->
<view class="table-fixed-wrap">
  <uni-table class="fixed-table" stripe emptyText="暂无更多数据">
    <uni-tr>
      <uni-th align="center">固定字段</uni-th>
    </uni-tr>
    <uni-tr>
      <uni-td align="center">1</uni-td>
    </uni-tr>
  </uni-table>
  <uni-table class="other-table" stripe emptyText="暂无更多数据">
    <uni-tr>
      <uni-th align="center">字段1</uni-th>
      <uni-th align="center">字段2</uni-th>
      <uni-th align="center">字段3</uni-th>
      <uni-th align="center">字段4</uni-th>
      <uni-th align="center">字段5</uni-th>
      <uni-th align="center">字段6</uni-th>
      <uni-th align="center">字段7</uni-th>
    </uni-tr>
    <uni-tr>
      <uni-td align="center">1</uni-td>
      <uni-td align="center">2</uni-td>
      <uni-td align="center">3</uni-td>
      <uni-td align="center">4</uni-td>
      <uni-td align="center">5</uni-td>
      <uni-td align="center">6</uni-td>
      <uni-td align="center">7</uni-td>
    </uni-tr>
  </uni-table>
</view>
1
2
3
4
5
6
7
8
9
10
11
12
13
// u-table 固定字段（双table实现）
.table-fixed-wrap {
  display: flex;
  .fixed-table {
    width: 100px !important;
    .uni-table {
      min-width: 100px !important;
    }
  }
  .other-table {
    width: calc(100vw - 100px) !important;
  }
}