Vue: 테이블에 중첩된 데이터 표시

Vue: 테이블에 중첩된 데이터 표시

오래된 코드를 다시 작성하고 Vue를 대체품으로 사용하는 중입니다.핸들 바를 사용하여 제작된 테이블 하나를 바꾸는 것 외에는 모든 것이 잘 진행되고 있습니다.

중첩된 핸들 바 사용{{each}}테이블 행에 관련 데이터를 표시하면서 중첩된 데이터 구조를 살펴볼 수 있습니다. 예를 들어 핸들 바를 사용하여 https://jsfiddle.net/6dsruo40/1/

Vue를 사용하여 동일한 작업을 수행하는 방법을 알 수 없습니다.v-for기타.

저만큼 만지작거려주세요.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의 메커니즘은 무엇입니까?감사합니다!

갱신된 템플릿의 관련 부분을 다음에 나타냅니다.

<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>

그리고 새로워진 바이올린.

요점은 이 시스템의 장점을 활용하는 것입니다.template둘 이상의 렌더링 요소tr반복마다.

언급URL : https://stackoverflow.com/questions/46598016/vue-displaying-nested-data-in-a-table