Vue：在表

Question

我正在重写一些旧代码，并使用Vue作为替代。除了改变一个使用把手模板化的桌子外，它一切都很好。

使用嵌套{{each}}的把手我可以在嵌套数据结构中向下工作，同时在表格行中显示相关数据：例如使用把手：https://jsfiddle.net/6dsruo40/1/

我无法弄清楚如何使用带有v-for等的Vue来做同样的事情。

像我一样捣蛋：https://jsfiddle.net/cj7go6bv/

我不知道如何处理数据结构，同时保持手柄中的<tr>

这是我正在使用的数据结构，但它很灵活：

var data = [
  {
key: "Region 1",
values: [
  {
    key: "Sub region 1",
    values: [
      {
        site: "Site A",
        timestamp: 1507246300935,
        total: 3,
      },
      {
        site: "Site B",
        timestamp: 1507246300818,
        total: 0,
      },
      {
        site: "Site C",
        timestamp: 1507246300936,
        total: 0,
      }
    ],
  },
  {
    key: "Sub region 2",
    values: [
      {
        site: "Site A",
        timestamp: 1507246301442,
        total: 20,
      },
      {
        site: "Site B",
        timestamp: 1507246301788,
        total: 5,
      }
    ]
   },
  {
    key: "Sub region 3",
    values: [
      {
        site: "Site A",
        timestamp: 1507246302503,
        total: 66,
      },
      {
        site: "Site B",
        timestamp: 1507246302783,
        total: 2
      }
    ]
  }
]
   },
   {
key: "Region 2",
values: [
  {
    key: "Sub region 1",
    values: [
      {
        site: "Site A",
        timestamp: 1507246306789,
        total: 0,
      },
      {
        site: "Site B",
        timestamp: 1507246307439,
        total: 6,
      }
    ]
  },
  {
    key: "Sub region 2",
    values: [
      {
        site: "Site A",
        timestamp: 1507246308269,
        total: 10,
      },
      {
        site: "Site B",
        timestamp: 1507246308683,
        total: 30,
      }
    ]
  }
]
}
];

到目前为止，我所拥有的Vue代码非常适中：

Vue.component('project-table', {
  template: '#table-template',
  props: {
    data: Array
  }
});

var app = new Vue({
    el: '#table-container',
    data: {data: sites},
    });

模板：

<div id="table-container">
  <project-table :data="data"></project-table>
</div>
    <script id="table-template" type="text/x-template">
        <table class="u-full-width">
            <thead>
                <tr>
                <th>Project location</th>
                <th>Total</th>
                <th>Timestamp</th>
            </tr>
        </thead>
        <tbody>
        <tr class="name-row" v-for="item in data">
            <th class="name" colspan="3">{{item.key}}</th>
        </tr>
        <tbody>
    </table>
</script>

Vue中用于显示表格的机制是什么，如在Handlebars中所做的那样？谢谢！

Answer 1

以下是模板更新的相关部分。

<tbody>
  <template v-for="item in data">
    <tr class="name-row" >
      <th class="name" colspan="3">{{item.key}}</th>
    </tr>
    <template v-for="subregion in item.values">
      <tr>
        <th class="group-name" colspan="4">{{subregion.key}}</th>
      </tr>
      <tr v-for="site in subregion.values">
        <td>{{site.site}}</td>
        <td>{{site.total}}</td>
        <td>
          <span>{{site.timestamp}}</span>
        </td>  
      </tr>
    </template>
  </template>
<tbody>

更新后的fiddle。

主要观点是利用template元素每次迭代渲染多个tr。