Vue 表格嵌套表格实现方法及示例

在 Vue 中嵌套表格，可以使用 Vue 的循环指令（v-for）来动态生成表格行和列。下面是一个简单的示例，展示如何嵌套表格：

<template>
  <div>
    <table>
      <thead>
        <tr>
          <th>名称</th>
          <th>数量</th>
          <th>详情</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for='(item, index) in items' :key='index'>
          <td>{{ item.name }}</td>
          <td>{{ item.quantity }}</td>
          <td>
            <table>
              <thead>
                <tr>
                  <th>属性</th>
                  <th>值</th>
                </tr>
              </thead>
              <tbody>
                <tr v-for='(detail, detailIndex) in item.details' :key='detailIndex'>
                  <td>{{ detail.attribute }}</td>
                  <td>{{ detail.value }}</td>
                </tr>
              </tbody>
            </table>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        {
          name: '商品1',
          quantity: 10,
          details: [
            { attribute: '颜色', value: '红色' },
            { attribute: '尺寸', value: 'XL' },
          ],
        },
        {
          name: '商品2',
          quantity: 5,
          details: [
            { attribute: '颜色', value: '蓝色' },
            { attribute: '尺寸', value: 'L' },
          ],
        },
      ],
    };
  },
};
</script>

在上面的示例中，外层表格用来展示商品的基本信息，而内层嵌套表格用来展示商品的详情信息。通过使用`v-for`指令，可以根据数据动态生成表格行和列。需要注意的是，每个`v-for`指令都需要提供一个唯一的`key`值，以便 Vue 能够正确地跟踪和更新表格的状态。

以上示例只是一个简单的嵌套表格示例，你可以根据具体需求来自定义表格的样式和数据结构。