让uni-app也能拥有合并单元格表格！纯手写，效果拔群！

2023-10-09 11:20:29

在uni-app中，table组件的缺失常常让人头疼。不过，凭借巧妙的手段，我们仍然可以手写一个有合并单元格的表格，让你的uni-app项目焕然一新。

妙招大揭秘

要实现合并单元格，我们的秘诀在于使用嵌套的view元素。通过精心布局，我们可以模拟出合并单元格的效果，让你的表格更加美观、易读。

步骤详解

创建一个外部容器view，用它来包裹整个表格。
为每一行创建一个view元素，用它来容纳该行的单元格。
对于需要合并的单元格，创建一个更大的view元素，并将其放置在其他单元格之上。
设置合并单元格view的column-span和row-span属性，分别指定它在列和行方向上的跨度。
填充单元格内容，确保它们与view元素的布局相对应。

代码示例

<template>
  <view class="table">
    <view class="row" v-for="row in data">
      <view
        class="cell"
        :style="{gridColumn: row.colSpan, gridRow: row.rowSpan}"
        v-for="cell in row.cells"
      >
        {{ cell.value }}
      </view>
    </view>
  </view>
</template>

<style>
.table {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
}

.row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
}

.cell {
  border: 1px solid black;
  text-align: center;
  padding: 5px;
}
</style>