VUE-使用V -For两次渲染表行和单元格

Question

我想使用vue渲染一个用行的表，但将单元格作为组件。

我已经做了一个有效的示例，说明了我想将其视为最终结果，并有一些与我认为我可以这样做的代码有关的代码：

html

<div id="app">
  <table>
    <thead>
      <tr>
        <th>Row</th>
        <th>ID</th>
        <th>Name</th>
        <th>Age</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="(row, rindex) in people">
        <td>{{ rindex }}</td>
        <cell v-for="(value, vindex, rindex) in row" :value="value" :vindex="vindex" :rindex="rindex"></cell>
      </tr>
    </tbody>
  </table>
  <template id="template-cell">
    <td>{{ value }}</td>
  </template>
</div>

JS

// Register component
Vue.component('cell', {
  template: '#template-cell',
  name: 'row-value',
  props: ['value', 'vindex', 'rindex']
  // In here I would like to access value, vindex and rindex
});
// Start application
new Vue({
  el: '#app',
  data: {
    people: [
      {id: 3, name: 'Bob', age: 27},
      {id: 4, name: 'Frank', age: 32},
      {id: 5, name: 'Joe', age: 38}
    ]
  }
});

这是因为，在VUE文档中，它们显示了一个示例：

And another for the index:
<div v-for="(value, key, index) in object">
  {{ index }}. {{ key }} : {{ value }}
</div>

从逻辑上讲，我应该能够在单元格组件中获取行中的行索引而没有太多问题，但事实并非如此，因为它出现了一堆错误，表明值未定义。

如果有人可以在这里指向正确的方向，那么我将非常感谢它，因为我没有这个问题，但真的很想了解如何正确实施。

（注意：我想渲染组件中的单元格的原因是注册值的变化，请参阅我在这里问的另一个问题的答案）

Answer 1

您只需要将 cell组件包装在 template元素中，这是因为html中的表只期望在tr中，当它看到 cell时，它不会呈现出来（请参阅类似的问题（请参阅类似的问题）在这里有角度）。但是，在这里可以将模板用作内容片段，然后在VUE编译后，它将添加tr代替HTML中的单元格。

  <tr v-for="(row, rindex) in people">
    <td>{{ rindex }}</td>
    <template>
       <cell  v-for="(value, vindex) in row" :value="value" :vindex="vindex" :rindex="rindex" ></cell>
    </template>
  </tr>

请参阅此处的工作笔。

Answer 2

我不确定是否可以在v-for构造函数中用rindex替换index。如果v-for的实现期望key和index的字符串标签，则您的rindex和vindex将不起作用。

我看到了另一个问题，如所讨论的参考页面所引用：vue

中的列表渲染

在对象上迭代时，该订单基于object.keys（）的密钥枚举顺序，这不能保证在JavaScript Engine实施中保持一致。

因此，您的第一个单元格可能具有该顺序的（ID，键，名称），而第二个单元格可能具有（名称，ID，键） - 不同的顺序。因此，最好的方法是避免使用cell的对象迭代器，并明确定义外观顺序：

<tr v-for="(person, index) in people">
    <td>{{ index }}</td>
    <cell :value="index" valueType="index" :rowIndex="index"></cell>
    <cell :value="person.id" valueType="id" :rowIndex="index"></cell>
    <cell :value="person.name" valueType="name" :rowIndex="index"></cell>
</tr>

现在，您的单元组件定义需要修改为：

Vue.component("cell", {
    template: "#template-cell",
    name: "row-value",
    props: ["value", "valueType", "rowIndex"],
    // your component code here...
})

现在您可以在单元组件内使用valueType和rowIndex。