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

1. 동일한 1depth별로 table을 나눠서 랜딩

2. 1depth별 tab button 생성하여 클릭시 해당 테이블로 스크롤 이동

 

  data(){
    return{
      iaList : this.$store.state.iaData,
      groupTarget:'1depth',
      groupTitles: [],
      groups : [],
    }
  },

groupTitles : 그룹별 테이블로 이동할 버튼들

groups : 1depth별 table로 나뉘어질 배열 [{'1depth title' : [],[],[]}, {} , ..]

groupTarget : 그룹을 나뉠 기준

 

 

 

 

  methods : {
    setGroupTitles(){
      // tab category
      let tabList = [];
      this.iaList.filter((item)=>{
        const curItem = item[this.groupTarget];
        if (curItem.length > 0){
          tabList.push(curItem)
        }
      })
      this.groupTitles = [...new Set(tabList)];
    },

    setGroups(list){
      // group별 분리
      for(let i=0; i<this.groupTitles.length; i++){
        let obj = {};
        let g = list.filter(item=>{
          return item[this.groupTarget] == this.groupTitles[i]
        })
        obj[this.groupTitles[i]] = g;
        this.groups.push(obj);
      }
    },
  }
}

  created () {
    this.setGroupTitles();
    this.setGroups(this.iaList);
  },

setGroupTitles(){}

iaList 중에 this.groupTarget(1Depth)의 value를 tabList에 넣고 마지막에 중복 제거한다.

 

setGroup(list) 

list 에는 this.iaList 배열이 들어간다

앞서 나눠놓은 groupTitles의 요소별로 동일한 1Depth를 가진 배열끼리 취합한뒤

해당 group title을 key : 취합한 배열을 value 형태로 this.groups에 넣는다

{groupTitle : arr}

 

created()

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>

Tab 컴포넌트에 groupTitles를 넘기고

Group 컴포넌트에 각 group별 <Group /> 컴포넌트를 랜딩한다