여러 테이블 행을 반환하는 Vue 구성 요소

여러 테이블 행을 반환하는 Vue 구성 요소

단일 구성 요소에서 두 개의 TR 요소를 반환하려고 합니다.v-design-row. vue는 템플릿 요소를 div로 감싸야 한다는 것을 알지만 html 테이블이 요구하는 태그 구조 때문에 div로 묶을 수 없습니다.두 번째를 더하면tr에서v-design-rowvue는 아무것도 렌더링하지 않습니다.

이것을 달성하기 위한 가장 좋은 방법을 제안할 수 있는 사람이 있나요?

main.vue

   <table class="table">
        <thead>
            <th>Image</th>
            <th>Name</th>
            <th>Description</th>
            <th>Status</th>
            <th>Order</th>
            <th>Edit</th>
            <th>Delete</th>
        </thead>
        <tbody v-for="catagory in catagories">
            <v-catagory-row :catagory="catagory"></v-catagory-row>
            <v-design-row v-for="design in catagory.designs" :design="design"></v-design-row>
        </tbody>
    </table>

v-design-row.표시하다

<template>
<tr>
    <td><img :src="design.image_directory" :alt="design.name"></td>
    <td>{{ design.name }}</td>
    <td>
        <button class="btn btn-secondary" type="button" data-toggle="collapse" :data-target="'#' + design.identifier" aria-expanded="false" :aria-controls="design.identifier">
            <i class="fa fa-plus" aria-hidden="true"></i> Show
        </button>
    </td>
    <td>
        <div class="switch">
            <input :id="'active'+design.id" v-model="design.active" class="btn-toggle btn-toggle-round-flat" type="checkbox">
            <label :for="'active'+design.id"></label>
        </div>
    </td>
    <td>
        <button class="btn btn-secondary" type="button">
            <i class="fa fa-caret-up" aria-hidden="true"></i>
        </button>
        <button class="btn btn-secondary" type="button">
            <i class="fa fa-caret-down" aria-hidden="true"></i>
        </button>
        {{ design.sort_order }}
    </td>
    <td>
        <button class="btn btn-secondary" type="button">
            <i class="fa fa-pencil" aria-hidden="true"></i>
        </button>
    </td>
    <td>
        <button class="btn btn-secondary" type="button">
            <i class="fa fa-trash" aria-hidden="true"></i>
        </button>
    </td>
</tr>
<tr>
    <td class="p-0" colspan="7">
        <div class="collapse" :id="design.identifier">
            <div class="p-3">
                {{ design.description }}
            </div>
        </div>
    </td>
</tr>
</template>

여러 개를 사용하여 행을 그룹화할 수 있습니다.<tbody>다음과 같은 섹션이 있습니다.

<table>
  <thead>
    <tr> ... </tr>
  </thead>
  <tbody>
     <tr> ... </tr>
     <tr> ... </tr>
  </tbody>
  <tbody>
     <tr> ... </tr>
     <tr> ... </tr>
  </tbody>
</table>

템플릿에서 이 기능을 사용하려면<tbody>루트 요소:

<template>
  <tbody>
    <tr> ... </tr>
    <tr> ... </tr>
  </tbody>
</template>

두 번째부터tr당신의 안에서v-design-row설계에 대한 설명이 포함되어 있습니다.이것은 전체 요소이며, 1개의 행을 차지하고 독자적인 레이아웃을 가질 것을 권장합니다.

또는 설명과 다른 모든 데이터를 구성 요소에 별도로 포함할 수 있습니다.

또, 스테이트먼트

vue를 사용하려면 템플릿 요소를 div로 묶어야 합니다.

정확하지 않습니다.템플릿에는 단일 요소인 경우 임의의 루트 요소를 포함할 수 있습니다.그래서 당신은 가질 수 있다.

<template>
  <tr>
  </tr>
</template>

또는 심지어

<template>
  <tr v-if="condition == 1">
  </tr>
  <tr v-else-if="condition == 2">
  </tr>
  <tr v-else>
  </tr>
</template>

언급URL : https://stackoverflow.com/questions/46893445/vue-component-returning-multiple-table-rows