div模拟的表格怎么做合并单元格功能

因为我是uniapp写的移动端项目，可能会多个地方用。所以需要兼容，我网上没看到什么好用的表格能完成我们的需求，就自己手写了一个。是用view布局，然后加点边框之类的来模拟的。这样h5，小程序，app什么的都能用。但是问题就是这种的写法，合并单元格这个功能如何实现呢，没有思路。有没有写过这种的，讲解一下，或者提供一下解决思路呢。

该回答引用ChatGPT

合并单元格通常在表格的数据量很大时用于提高可读性和美观性，但是用 view 布局手写表格时，合并单元格需要额外的处理。以下是两种常见的实现方式：

1、使用 CSS Grid 布局
CSS Grid 布局是一个二维布局系统，可以用来创建复杂的网格布局。你可以使用 grid-template-areas 属性来指定每个单元格的位置，然后使用 grid-row-start、grid-row-end、grid-column-start 和 grid-column-end 属性来合并单元格。具体实现可以参考以下示例：


<div class="table">
  <div class="row">
    <div class="cell" style="grid-area: 1 / 1 / 2 / 2;">A1</div>
    <div class="cell" style="grid-area: 1 / 2 / 2 / 3;">B1</div>
    <div class="cell" style="grid-area: 1 / 3 / 3 / 4;">C1</div>
  </div>
  <div class="row">
    <div class="cell" style="grid-area: 2 / 1 / 3 / 2;">A2</div>
    <div class="cell" style="grid-area: 2 / 2 / 3 / 3;">B2</div>
    <div class="cell" style="grid-area: 2 / 3 / 3 / 4;">C2</div>
  </div>
</div>

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

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

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

使用 JavaScript 实现合并单元格的关键是要找到需要合并的单元格，并修改它们的行列跨度（rowspan 和 colspan）。可以通过遍历表格中的单元格，根据单元格的位置和内容来确定需要合并的单元格。

以下是一个基本的示例：

<div class="table">
  <div class="row">
    <div class="cell">A1</div>
    <div class="cell">B1</div>
    <div class="cell">C1</div>
  </div>
  <div class="row">
    <div class="cell">A2</div>
    <div class="cell">B2</div>
    <div class="cell">C2</div>
  </div>
  <div class="row">
    <div class="cell">A3</div>
    <div class="cell">B3</div>
    <div class="cell">C3</div>
  </div>
</div>

<script>
const table = document.querySelector('.table');
const cells = table.querySelectorAll('.cell');
const rows = table.querySelectorAll('.row');

// 遍历每一行
for (let i = 0; i < rows.length; i++) {
  const row = rows[i];
  const cellsInRow = row.querySelectorAll('.cell');

  // 遍历每一列
  for (let j = 0; j < cellsInRow.length; j++) {
    const cell = cellsInRow[j];

    // 判断单元格是否需要合并
    if (cell.innerHTML === 'B1' || cell.innerHTML === 'B2') {
      cell.setAttribute('rowspan', '2');
      cell.classList.add('merge');
    }
    if (cell.innerHTML === 'B3') {
      cell.setAttribute('colspan', '2');
      cell.classList.add('merge');
    }
  }
}
</script>

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

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

.cell {
  border: 1px solid black;
  padding: 5px;
}

.merge {
  position: relative;
}

.merge:before {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  width: 100%;
  height: 100%;
  z-index: -1;
  border: 1px solid black;
}

.merge[rowspan]:before {
  border-top: none;
  border-bottom: none;
}

.merge[colspan]:before {
  border-left: none;
  border-right: none;
}
</style>

在这个示例中，我们遍历了每一个单元格，判断单元格的内容是否为需要合并的单元格，如果是，则设置它的 rowspan 或 colspan 属性，并添加 merge 类来为合并后的单元格添加样式。最后，我们使用 CSS 为合并后的单元格添加边框。

标签上写

img