如何在Vuetify中实现表格的动态rowspan效果？

核心思路 #

先对扁平的原始数据做预处理，按需要合并的列维度计算每组重复数据的长度（即rowspan值），同时标记哪些行需要渲染对应列的单元格（避免重复渲染），最后在模板中根据标记和rowspan值渲染表格。

步骤1：数据预处理（计算Rowspan与渲染标记） #

假设你的原始数据是类似这样的扁平数组：

const rawData = [
  { category: '电子产品', type: '手机', brand: '苹果', model: 'iPhone 15', price: 5999 },
  { category: '电子产品', type: '手机', brand: '苹果', model: 'iPhone 14', price: 4999 },
  { category: '电子产品', type: '平板', brand: '苹果', model: 'iPad Pro', price: 7999 },
  { category: '家用电器', type: '冰箱', brand: '海尔', model: 'BCD-500W', price: 3999 },
  { category: '家用电器', type: '冰箱', brand: '美的', model: 'BCD-450W', price: 3499 }
];

通过计算属性处理数据，生成带rowspan和显示标记的结构：

computed: {
  processedData() {
    // 定义需要合并的列顺序（从左到右，优先级从高到低）
    const mergeColumns = ['category', 'type', 'brand'];
    const result = [...this.rawData];
    
    // 遍历每一列，计算rowspan和显示标记
    mergeColumns.forEach(col => {
      let currentValue = null;
      let spanCount = 0;
      // 倒序遍历，方便累计rowspan
      for (let i = result.length - 1; i >= 0; i--) {
        const item = result[i];
        if (item[col] === currentValue) {
          spanCount++;
          item[`${col}_rowspan`] = 0; // 标记为不显示
        } else {
          currentValue = item[col];
          item[`${col}_rowspan`] = spanCount || 1;
          spanCount = 1;
        }
      }
    });
    
    return result;
  }
}

步骤2：Vuetify表格模板渲染 #

在模板中，根据预处理后的标记决定是否渲染单元格，并设置rowspan属性：

<v-table>
  <thead>
    <tr>
      <th>分类</th>
      <th>类型</th>
      <th>品牌</th>
      <th>型号</th>
      <th>价格</th>
    </tr>
  </thead>
  <tbody>
    <tr v-for="(item, index) in processedData" :key="index">
      <!-- 分类列 -->
      <td v-if="item.category_rowspan > 0" :rowspan="item.category_rowspan">
        {{ item.category }}
      </td>
      <!-- 类型列 -->
      <td v-if="item.type_rowspan > 0" :rowspan="item.type_rowspan">
        {{ item.type }}
      </td>
      <!-- 品牌列 -->
      <td v-if="item.brand_rowspan > 0" :rowspan="item.brand_rowspan">
        {{ item.brand }}
      </td>
      <!-- 不需要合并的列直接渲染 -->
      <td>{{ item.model }}</td>
      <td>{{ item.price }}</td>
    </tr>
  </tbody>
</v-table>

关键说明 #

• 列合并顺序：从左到右优先合并，避免出现单元格错位
• 倒序遍历计算：高效累计同值行的数量，无需额外分组操作
• 渲染标记控制：通过v-if过滤重复单元格，配合rowspan实现合并效果

内容的提问来源于stack exchange，提问作者Keyboard Corporation