当前位置：首页 > VUE

vue实现合并表格

2026-03-08 17:15:12VUE

Vue 实现合并表格的方法

使用 `rowspan` 和 `colspan` 属性

在 Vue 模板中直接使用 HTML 的 rowspan 和 colspan 属性来合并单元格。这种方法适用于静态或少量动态数据。

<template>
  <table>
    <tr>
      <td rowspan="2">合并行</td>
      <td>单元格1</td>
    </tr>
    <tr>
      <td>单元格2</td>
    </tr>
  </table>
</template>

动态计算合并单元格

对于动态数据，可以通过计算属性或方法动态生成 rowspan 和 colspan 的值。

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

<script>
export default {
  data() {
    return {
      tableData: [
        { id: 1, name: 'A', category: 'X' },
        { id: 2, name: 'A', category: 'X' },
        { id: 3, name: 'B', category: 'Y' }
      ]
    };
  },
  computed: {
    processedData() {
      const mergedData = [];
      let prevName = null;
      let spanCount = 0;

      this.tableData.forEach((item, index) => {
        if (item.name === prevName) {
          spanCount++;
          mergedData[mergedData.length - 1].name.rowspan++;
        } else {
          mergedData.push({
            name: { value: item.name, rowspan: 1 },
            category: { value: item.category, rowspan: 1 }
          });
          prevName = item.name;
          spanCount = 1;
        }
      });

      return mergedData;
    }
  }
};
</script>

使用第三方库

如果需要更复杂的表格合并功能，可以使用第三方库如 element-ui 或 vxe-table，它们提供了内置的表格合并功能。

Element UI 示例：

<template>
  <el-table :data="tableData" :span-method="arraySpanMethod">
    <el-table-column prop="id" label="ID"></el-table-column>
    <el-table-column prop="name" label="Name"></el-table-column>
    <el-table-column prop="category" label="Category"></el-table-column>
  </el-table>
</template>

<script>
export default {
  methods: {
    arraySpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 1) {
        if (rowIndex % 2 === 0) {
          return { rowspan: 2, colspan: 1 };
        } else {
          return { rowspan: 0, colspan: 0 };
        }
      }
    }
  }
};
</script>

自定义合并逻辑

对于更灵活的合并需求，可以自定义合并逻辑，例如根据数据内容动态合并相同值的单元格。

vue实现合并表格

methods: {
  mergeCells(data, key) {
    const spans = [];
    let pos = 0;
    for (let i = 0; i < data.length; ) {
      const currentValue = data[i][key];
      let count = 1;
      while (i + count < data.length && data[i + count][key] === currentValue) {
        count++;
      }
      spans[pos] = count;
      for (let j = pos + 1; j < pos + count; j++) {
        spans[j] = 0;
      }
      pos += count;
      i += count;
    }
    return spans;
  }
}