[vue: worklist 제작] 2. 변환된 json으로 1Depth 단위로 테이블 그리기(3)

 <Group /> 랜딩

 

App.vue 에서 다음과 같이 데이터를 받아왔다

<template>
  <div>
      <header>
        <Tab :tabLists="groupTitles"/>
      </header>
      
      <article class="content">
        <Group v-for="(group, idx) in groups" 
          :iaList="group" 
          :idx="idx" />
      </article>
  </div>
</template>

 

 

 

 

Group.vue

script

  props:{
    isModify : Boolean,
    iaList : Object,
    idx: Number
  },
  data (){
    return {
      iaGroup : Object.values(this.iaList)[0],
      iaKeys: this.$store.state.iaKeys,
    }
  },

 

template

<template>
  <div class="group">
      <h2 :id="`groupTitle__${idx}`" class="groupTitle">{{Object.keys(iaList)[0]}}</h2>

      <table>
        <colgroup>
            <col v-for="(iaKey) in iaKeys"/>
        </colgroup>
        <thead>
          <tr>
            <th v-for="(iaKey) in iaKeys">
              <span v-if="iaKey == 'worklist-status'">상태</span>
              <span v-else-if="iaKey == 'worklist-path'">path</span>
              <span v-else-if="iaKey == 'worklist-note'">비고</span>
              <span v-else>{{ iaKey }}</span>
            </th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(iaValList) in iaGroup">
            <td v-for="(iaVal) in iaValList">
              <span>{{iaVal}}</span>
            </td>
          </tr>
        </tbody>
      </table>
  </div>
</template>

1. h2에 this.groups에 저장된 {groupTitle : arr} 의 key값을 넣어준다

  id에 tab 컴포넌트에서 약속한 id값을 넣어준다. 

https://shubamba.tistory.com/109

[vue: worklist 제작] 3. 탭으로 1depth 인덱싱

  tab에서 해당 타이틀 버튼을 클릭시 h2의 id를 찾아서 이 위치로 스크롤을 이동시켜준다.

 

2.  제목열에 해당하는 iaKeys를 이용하여 col과 thead의 th를 그려준다

명칭의 중복을 피하기위해 worklist- 접두사로 만들어둔 부분은 적절한 명칭으로 바꿔준다 

참고 : [vue: worklist 제작] 1. csv파일을 json으로 변환하기

<th v-for="(iaKey) in iaKeys" :class="`col__${iaKey.replace(/\s/g, '-')}`">

<span v-if="iaKey == 'worklist-status'">상태</span>

<span v-else-if="iaKey == 'worklist-path'">path</span>

<span v-else-if="iaKey == 'worklist-note'">비고</span>

<span v-else>{{ iaKey }}</span>

</th>

 

3. 1행 1열씩 출력