当前位置：首页 > VUE

vue 实现跨行表格

2026-02-11 10:50:30VUE

跨行表格的实现方法

在 Vue 中实现跨行表格通常需要结合 HTML 的 rowspan 属性。以下是几种常见的方法：

使用原生 HTML 表格

通过 v-for 循环数据并结合 rowspan 属性实现跨行效果。数据需要预先处理以标记哪些单元格需要跨行。

<template>
  <table border="1">
    <tr>
      <th>姓名</th>
      <th>科目</th>
      <th>成绩</th>
    </tr>
    <tr v-for="(item, index) in tableData" :key="index">
      <td v-if="item.showName" :rowspan="item.nameRowspan">{{ item.name }}</td>
      <td>{{ item.subject }}</td>
      <td>{{ item.score }}</td>
    </tr>
  </table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: '张三', showName: true, nameRowspan: 2, subject: '语文', score: 90 },
        { subject: '数学', score: 85 },
        { name: '李四', showName: true, nameRowspan: 3, subject: '语文', score: 88 },
        { subject: '数学', score: 92 },
        { subject: '英语', score: 78 }
      ]
    }
  }
}
</script>

使用 Element UI 表格组件

Element UI 的 el-table 组件通过自定义 span-method 方法实现合并行或列。

<template>
  <el-table
    :data="tableData"
    border
    :span-method="arraySpanMethod"
    style="width: 100%">
    <el-table-column prop="name" label="姓名" width="180"></el-table-column>
    <el-table-column prop="subject" label="科目"></el-table-column>
    <el-table-column prop="score" label="成绩"></el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: '张三', subject: '语文', score: 90 },
        { name: '张三', subject: '数学', score: 85 },
        { name: '李四', subject: '语文', score: 88 },
        { name: '李四', subject: '数学', score: 92 },
        { name: '李四', subject: '英语', score: 78 }
      ]
    }
  },
  methods: {
    arraySpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        if (rowIndex % 2 === 0) {
          return { rowspan: 2, colspan: 1 }
        } else {
          return { rowspan: 0, colspan: 0 }
        }
      }
    }
  }
}
</script>

使用 VxeTable 高级表格

VxeTable 提供了更便捷的合并单元格功能，通过配置 merge-cells 属性实现。

<template>
  <vxe-table
    border
    :data="tableData"
    :merge-cells="mergeCells">
    <vxe-column field="name" title="姓名"></vxe-column>
    <vxe-column field="subject" title="科目"></vxe-column>
    <vxe-column field="score" title="成绩"></vxe-column>
  </vxe-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: '张三', subject: '语文', score: 90 },
        { name: '张三', subject: '数学', score: 85 },
        { name: '李四', subject: '语文', score: 88 },
        { name: '李四', subject: '数学', score: 92 },
        { name: '李四', subject: '英语', score: 78 }
      ],
      mergeCells: [
        { row: 0, col: 0, rowspan: 2 },
        { row: 2, col: 0, rowspan: 3 }
      ]
    }
  }
}
</script>

数据处理建议

实现跨行表格前，通常需要对数据进行预处理：

vue 实现跨行表格

为需要合并的单元格添加标记属性（如 rowspan 值）
计算每个合并区域的行数
过滤掉被合并的重复数据行

function processData(originalData) {
  const result = []
  let currentName = ''
  let count = 0

  originalData.forEach((item, index) => {
    if (item.name !== currentName) {
      currentName = item.name
      count = originalData.filter(x => x.name === currentName).length
      result.push({ ...item, showName: true, nameRowspan: count })
    } else {
      result.push({ ...item, showName: false })
    }
  })

  return result
}