uniapp使用grid布局实现单元格合并效果

官方Uni-table没有提供合并属性，用了原生的方式也不太对，先记录下，有合适的方法再来补充

要实现的效果图如下：

代码：

<template>
  <view class="grid-container">
    <!-- 第一行：标题 -->
    <view class="header" style="grid-column: span 3;">演示设备使用统计</view>

    <!-- 第二行：使用者 -->
    <view class="label" style="grid-column: span 2;">使用者</view>
    <view class="value">吴浩</view>

    <!-- 第三行：起始时间 -->
    <view class="label" style="grid-column: span 2;">起始时间</view>
    <view class="value">2024.11.23 14:45:35</view>

    <!-- 第四行：总次数 -->
    <view class="label" style="grid-column: span 2;">总次数</view>
    <view class="value">134</view>

    <!-- 第五行：总排名 -->
    <view class="label" style="grid-column: span 2;">总排名</view>
    <view class="value">1</view>

    <!-- 第六行：本月次数 -->
    <view class="label" style="grid-column: span 2;">本月次数</view>
    <view class="value">23</view>

    <!-- 第七行：本月排名 -->
    <view class="label" style="grid-column: span 2;">本月排名</view>
    <view class="value">2</view>

    <!-- 第八行：最近一次使用（时间） -->
    <view class="label" style="grid-row: span 2;">最近一次使用</view>
    <view class="label">时间</view>
    <view class="value">2025.01.03 12:45:33</view>

    <!-- 第九行：最近一次使用（地址） -->
    <view class="label">地址</view>
    <view class="value">南京江宁创智产业园（或者用定位）</view>
  </view>
</template>

<script>
export default {
  name: "GridTableExample",
};
</script>

<style>
/* 网格容器样式 */
.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr; /* 定义3列等分 */
  grid-auto-rows: auto; /* 根据内容自动调整行高 */
  border: 1px solid #000; /* 表格边框 */
  width: 300px; /* 表格宽度 */
  margin: 0 auto; /* 居中 */
  text-align: center; /* 内容居中对齐 */
}

/* 通用样式 */
.grid-container > view {
  border: 1px solid #000; /* 单元格边框 */
  padding: 10px; /* 内边距 */
  box-sizing: border-box;
}

/* 标题样式 */
.header {
  font-weight: bold;
  font-size: 16px;
}

/* 标签样式（左侧列） */
.label {
  background-color: #f9f9f9;
  font-weight: bold;
}

/* 值样式（右侧列） */
.value {
  background-color: #fff;
}
</style>