vue实现复杂表格合并

Vue 实现复杂表格合并的方法

使用 rowspan 和 colspan 属性

通过动态计算 rowspan 和 colspan 属性实现单元格合并。在 Vue 的模板中，可以使用 v-for 循环生成表格，并通过计算属性或方法确定需要合并的行或列。

<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>

数据处理逻辑示例：

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 result = [];
      let prevName = '';
      let prevCategory = '';
      let nameRowspan = 1;
      let categoryRowspan = 1;

      this.tableData.forEach((item, index) => {
        if (item.name === prevName) {
          nameRowspan++;
          result[result.length - 1][0].rowspan = nameRowspan;
          result.push([
            { value: '', rowspan: 0, colspan: 1 },
            { value: item.category, rowspan: categoryRowspan, colspan: 1 }
          ]);
        } else {
          prevName = item.name;
          nameRowspan = 1;
          result.push([
            { value: item.name, rowspan: nameRowspan, colspan: 1 },
            { value: item.category, rowspan: 1, colspan: 1 }
          ]);
        }
      });

      return result;
    }
  }
};

使用第三方表格组件库

对于更复杂的表格合并需求，可以使用成熟的 Vue 表格组件库，如 Element UI、Ant Design Vue 或 VxeTable，它们通常内置了合并单元格的功能。

以 Element UI 为例：

<template>
  <el-table
    :data="tableData"
    :span-method="arraySpanMethod"
    border
  >
    <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 === 0) {
        if (rowIndex % 2 === 0) {
          return {
            rowspan: 2,
            colspan: 1
          };
        } else {
          return {
            rowspan: 0,
            colspan: 0
          };
        }
      }
    }
  }
};
</script>

动态计算合并策略

对于需要根据数据动态合并的情况，可以预先处理数据，标记需要合并的单元格范围，然后在渲染时应用这些标记。

function calculateSpans(data, mergeFields) {
  const spans = {};
  mergeFields.forEach(field => {
    spans[field] = [];
    let count = 1;
    for (let i = 0; i < data.length; i++) {
      if (i === 0) {
        spans[field].push(1);
        continue;
      }
      if (data[i][field] === data[i - 1][field]) {
        spans[field][i - count] += 1;
        spans[field].push(0);
        count++;
      } else {
        spans[field].push(1);
        count = 1;
      }
    }
  });
  return spans;
}

响应式更新合并状态

当表格数据发生变化时，需要重新计算合并状态。可以在 watch 中监听数据变化，并更新合并信息。

watch: {
  tableData: {
    handler(newVal) {
      this.mergeInfo = this.calculateMergeInfo(newVal);
    },
    deep: true
  }
}

通过以上方法，可以实现 Vue 中的复杂表格合并需求，根据具体场景选择合适的方式。对于简单合并，手动计算 rowspan 和 colspan 即可；对于复杂场景，建议使用成熟的表格组件库。