Vuejs中的嵌套表

debugcn 发表于 Dev

稀有类

我正在学习VueJ，但是我正在努力创建以下标记并在语义上保持正确。我想使用v-for循环来重复这两个组件-但是我应该放在哪里？我无法将其添加到中，tbody因为无法重复。如果我在两tr行中都添加了循环，则最终将component1重复n次，然后将component2重复n次。语义上，我不能使用span或div（除非它在td元素内），并且组件必须具有单个根。意见表示赞赏。

    <thead></thead>
    <tbody>
        <tr class="component1">
            <td></td><td></td><td></td>
        </tr>
        <tr class="component2">
            <td colspan="3">
                <table>
                    ...
                </table>
            </td>
        </tr>
    </tbody>
</table>

劳伦斯·谢罗（Lawrence Cherone）

如果它们是组件，则循环遍历它们。

let components = {
  component1: {
    template: '#component1'
  },
  component2: {
    template: '#component2'
  }
}

new Vue({
  el: "#app",
  data:() => ({
   components
  })
})

td{border:1px solid orange}

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<div id="app">
  <table>
    <thead></thead>
    <tbody>
      <component :is="component" v-for="(component, index) in components" :key="index"></component>
    </tbody>
  </table>
</div>

<template id="component1">
  <tr class="component1">
     <td>a</td>
     <td>b</td>
     <td>c</td>
   </tr>
</template>

<template id="component2">
  <tr class="component2">
    <td colspan="3">
      <table>
        ...
      </table>
    </td>
  </tr>
</template>

如果没有充分的理由使用表格，则应使用div，这些表格不是用于设计布局的。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。