vue 实现跨行表格

跨行表格的实现方法

在Vue中实现跨行表格通常需要结合HTML的rowspan或colspan属性，同时动态绑定数据。以下是具体实现方式：

使用rowspan实现跨行

通过计算每行需要合并的单元格数量，动态绑定rowspan属性：

<template>
  <table>
    <tr v-for="(row, rowIndex) in processedData" :key="rowIndex">
      <td v-for="(cell, cellIndex) in row" :key="cellIndex" 
          :rowspan="cell.rowspan" v-if="cell.show">
        {{ cell.value }}
      </td>
    </tr>
  </table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { id: 1, name: 'A', group: 'X' },
        { id: 2, name: 'B', group: 'X' },
        { id: 3, name: 'C', group: 'Y' }
      ]
    }
  },
  computed: {
    processedData() {
      const groups = {};
      this.tableData.forEach(item => {
        if (!groups[item.group]) {
          groups[item.group] = [];
        }
        groups[item.group].push(item);
      });

      return Object.keys(groups).flatMap(group => {
        return groups[group].map((item, index) => ({
          group: { value: index === 0 ? group : '', rowspan: index === 0 ? groups[group].length : 0, show: index === 0 },
          name: { value: item.name, rowspan: 1, show: true }
        }));
      });
    }
  }
}
</script>

使用第三方表格组件

对于复杂需求，可以使用支持行列合并的表格组件库：

1. Element UI的el-table：

   
   <el-table :data="tableData" :span-method="spanMethod">
   <el-table-column prop="group" label="Group"></el-table-column>
   <el-table-column prop="name" label="Name"></el-table-column>
   </el-table>

export default { methods: { spanMethod({ row, column, rowIndex, columnIndex }) { if (columnIndex === 0) { if (rowIndex % 2 === 0) { return { rowspan: 2, colspan: 1 }; } else { return { rowspan: 0, colspan: 0 }; } } } } } ```

1. VxeTable等专业表格组件库也提供类似功能。

纯CSS实现方案

对于简单布局，可以使用CSS Grid实现伪表格效果：

<div class="grid-table">
  <div class="cell header">Group</div>
  <div class="cell header">Name</div>

  <div class="cell row-span">X</div>
  <div class="cell">A</div>

  <div class="cell hidden"></div>
  <div class="cell">B</div>
</div>

<style>
.grid-table {
  display: grid;
  grid-template-columns: 100px 100px;
}

.cell {
  border: 1px solid #ddd;
  padding: 8px;
}

.row-span {
  grid-row: span 2;
}

.hidden {
  visibility: hidden;
}
</style>

注意事项

• 动态计算rowspan时需要处理好数据分组逻辑
• 被合并的单元格需要使用v-if隐藏或返回rowspan: 0
• 复杂表格建议使用专业组件库减少开发复杂度
• 移动端需要考虑响应式布局问题