vue 实现跨行表格

跨行表格实现方法

使用 rowspan 属性

在 Vue 中可以通过 v-for 结合 rowspan 实现跨行表格。关键点在于计算每个单元格需要跨越的行数。

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

数据处理逻辑

需要预先处理数据，标记需要合并的单元格及其跨越行数：

data() {
  return {
    tableData: [
      { category: 'A', item: 'Item 1', value: 10 },
      { category: 'A', item: 'Item 2', value: 20 },
      { category: 'B', item: 'Item 3', value: 30 }
    ]
  }
},
computed: {
  processedData() {
    const grouped = {}
    this.tableData.forEach(item => {
      if (!grouped[item.category]) {
        grouped[item.category] = []
      }
      grouped[item.category].push(item)
    })

    return Object.entries(grouped).flatMap(([category, items]) => {
      return items.map((item, index) => {
        return [
          { 
            value: category, 
            rowspan: index === 0 ? items.length : 0 
          },
          { 
            value: item.item, 
            rowspan: 1 
          },
          { 
            value: item.value, 
            rowspan: 1 
          }
        ]
      })
    })
  }
}

样式优化

添加基础样式使表格更美观：

table {
  border-collapse: collapse;
  width: 100%;
}
td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
}

动态合并单元格

对于动态数据，可以使用计算属性自动计算合并规则：

methods: {
  calculateRowspans(data, key) {
    const spans = []
    let count = 0

    for (let i = data.length - 1; i >= 0; i--) {
      if (i === data.length - 1 || data[i][key] !== data[i + 1][key]) {
        count = 1
      } else {
        count++
      }
      spans[i] = count
    }

    return spans
  }
}

第三方组件方案

使用现成的表格组件如 Element UI 或 VxeTable 可以更简单实现：

<el-table :data="tableData" :span-method="arraySpanMethod">
  <el-table-column prop="category" label="Category"></el-table-column>
  <el-table-column prop="item" label="Item"></el-table-column>
  <el-table-column prop="value" label="Value"></el-table-column>
</el-table>

methods: {
  arraySpanMethod({ row, column, rowIndex, columnIndex }) {
    if (columnIndex === 0) {
      if (rowIndex % 2 === 0) {
        return { rowspan: 2, colspan: 1 }
      }
      return { rowspan: 0, colspan: 0 }
    }
  }
}