Vue.js新手求助：如何利用给定数据渲染带rowspan的表格？

阿华AIGC实验室

2026-5-29

用Vue.js渲染带rowspan的销售数据表格

嘿，作为Vue新手碰到rowspan表格渲染确实容易懵，我来一步步教你怎么实现你想要的效果～

核心思路

每个产品的名称单元格需要合并与它对应的月份行数，也就是rowspan的值等于该产品months数组的长度。我们可以通过嵌套循环来处理：外层遍历产品，内层遍历每个产品的月份数据，只在第一个月份的行里显示产品名称并设置rowspan，后续月份的行跳过产品名称列即可。

完整实现代码

下面是可直接运行的示例，包含数据处理、表格渲染和总销售额计算：

<!DOCTYPE html>
<html>
<head>
  <title>Vue Monthly Sales Table</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
  <style>
    table {
      border-collapse: collapse;
      width: 80%;
      margin: 20px auto;
    }
    th, td {
      border: 1px solid #ddd;
      padding: 8px;
      text-align: left;
    }
    th {
      background-color: #f2f2f2;
    }
  </style>
</head>
<body>
  <div id="app">
    <h2>{{ title }}</h2>
    <table>
      <thead>
        <tr>
          <th>Product</th>
          <th>Month</th>
          <th>Unit Price</th>
          <th>Units Sold</th>
          <th>Total</th>
        </tr>
      </thead>
      <tbody>
        <!-- 用template包裹每个产品的所有行，避免生成多余DOM -->
        <template v-for="(product, prodIndex) in monthlySales" :key="prodIndex">
          <tr v-for="(month, monthIndex) in product.months" :key="monthIndex">
            <!-- 仅在第一个月份行显示产品名称，并设置rowspan -->
            <td v-if="monthIndex === 0" :rowspan="product.months.length">
              {{ product.product }}
            </td>
            <td>{{ month.month }}</td>
            <td>{{ month.unitPrice }}</td>
            <td>{{ month.unitsSold }}</td>
            <!-- 计算并格式化总销售额 -->
            <td>{{ calculateTotal(month.unitPrice, month.unitsSold) }}</td>
          </tr>
        </template>
      </tbody>
    </table>
  </div>

  <script>
    new Vue({
      el: '#app',
      data() {
        return {
          title: "Monthly Sales",
          monthlySales: [
            {
              "product": "P123",
              "months": [
                { "month": "January", "unitPrice": "$80", "unitsSold": 2200 },
                { "month": "February", "unitPrice": "$82", "unitsSold": 1900 },
                { "month": "March", "unitPrice": "$81", "unitsSold": 1800 }
              ]
            },
            {
              "product": "Q456",
              "months": [
                { "month": "January", "unitPrice": "$20", "unitsSold": 200 },
                { "month": "February", "unitPrice": "$22", "unitsSold": 100 }
              ]
            }
          ]
        }
      },
      methods: {
        // 计算单月总销售额并格式化为美元
        calculateTotal(unitPrice, unitsSold) {
          const price = parseFloat(unitPrice.replace('$', ''));
          const total = price * unitsSold;
          return total.toLocaleString('en-US', { 
            style: 'currency', 
            currency: 'USD' 
          });
        }
      }
    })
  </script>
</body>
</html>