[vuejs] 특정 조건에서 동적 rowspan을 통한 테이블 병합

한동안 거지같던 wijmo 그리드를 쓰더니 걷어내고 DevExtreme으로 바꾼단다. -_-

하여간, 당분간은 그리드 솔루션을 쓰지 말고 기본 태그를 사용하라길래 그렇게 했다.

 

요구사항은 이렇다. 아래와 같은 평범한 그리드를

COL1	COL2	COL3	COL4	COL5	COL6	COL7	COL8
A category	100	2023-01-09	상품1	30000	1	30000	완료
A category	100	2023-01-09	상품2	10000	3	30000	완료
B category	200	2023-01-09	상품3	15000	2	30000	완료
A category	300	2023-01-09	상품4	10000	1	10000	완료
B category	400	2023-01-09	상품5	2000	5	10000	미완료

↓

하단과 같이 병합하는 것이다.

COL1	COL2	COL3	COL4	COL5	COL6	COL7	COL8
A category	100	2023-01-09	상품1	30000	1	30000	완료
			상품2	10000	3	30000	완료
B category	200	2023-01-09	상품3	15000	2	30000	완료
A category	300	2023-01-09	상품4	10000	1	10000	완료
B category	400	2023-01-09	상품5	2000	5	10000	미완료

 

COL1과 COL2 그리고 COL3이 동일할 때, 해당 컬럼만 병합을 하는 모양이다.

데이터 파일부터 만들어보자. COL4~COL8까지의 컬럼을 2 depth로 만들어주어야했다.

 

export const dataInfo = [
 {
  COL1 : 'A category',
  COL2 : '100',
  COL3 : '2023-01-09'
  subInfo : [
    {
        COL4 : '상품1',
        COL5 : 30000,
        COL6 : 1,
        COL7 : 30000,
        COL8 : '완료'
    },
    {
        COL4 : '상품2',
        COL5 : 10000,
        COL6 : 3,
        COL7 : 30000,
        COL8 : '완료'
    }
  ],
 },
 {
  COL1 : 'B category',
  COL2 : '200',
  COL3 : '2023-01-09'
  subInfo : [
    {
        COL4 : '상품3',
        COL5 : 15000,
        COL6 : 2,
        COL7 : 30000,
        COL8 : '완료'
    },
   ],  
 },
 {
  COL1 : 'A category',
  COL2 : '300',
  COL3 : '2023-01-09'
  subInfo : [
     {
        COL4 : '상품4',
        COL5 : 10000,
        COL6 : 1,
        COL7 : 10000,
        COL8 : '완료'
     },
   ],  
},
{
  COL1 : 'B category',
  COL2 : '400',
  COL3 : '2023-01-09'
  subInfo : [
    {
        COL4 : '상품5',
        COL5 : 2000,
        COL6 : 5,
        COL7 : 10000,
        COL8 : '완료'
    },
  ],  
 }
];

 

그리고 <tbody> 쪽을 이렇게 맞춰주면 된다.

우선 v-if를 걸어, 2 depth의 배열이 하나 이상인 경우(즉, 병합을 해야하는 경우)

:rowspan으로 컬럼 병합을 해주었는데, 하단에 딸린 2 depth의 배열의 길이만큼 rowspan 값을 걸어주었다. :rowspan="item.subInfo.length"

그리고, 병합하지 않을 COL4~COL8 컬럼 데이터를 slice로 쪼개어 뿌려주었다.

 

병합하지 않는 경우에는 그냥 그대로 뿌려주면 된다.

<tbody>
  <template v-for="(item, index) in table.data" :key="index">
    <template v-if="item.subInfo.length > 1"> <!--병합하는 경우-->
      <tr @click="selectRow('table', index)">
        <td class="ta-c" :rowspan="item.subInfo.length">{{ item.COL1 }}</td>
        <td class="ta-c" :rowspan="item.subInfo.length">
          <button type="button" @click="openPopup(item)" style="text-decoration: underline">{{ item.COL2 }}</button>
        </td>
        <td class="ta-c" :rowspan="item.subInfo.length">{{ item.COL3 }}</td>
        <td class="ta-l">{{ item.subInfo[0].COL4 }}</td>
        <td class="ta-r">{{ item.subInfo[0].COL5 }}</td>
        <td class="ta-c">{{ item.subInfo[0].COL6 }}</td>
        <td class="ta-r">{{ item.subInfo[0].COL7 }}</td>
        <td class="ta-c">{{ item.subInfo[0].COL8 }}</td>
      </tr>
      <template v-for="(itm, idx) in item.subInfo.slice(1, item.subInfo.length)" :key="idx">
        <tr>
          <td class="ta-l">{{ itm.COL4 }}</td>
          <td class="ta-r">{{ itm.COL5 }}</td>
          <td class="ta-c">{{ itm.COL6 }}</td>
          <td class="ta-r">{{ itm.COL7 }}</td>
          <td class="ta-c">{{ itm.COL8 }}</td>
        </tr>
      </template>
    </template>
    <template v-if="item.subInfo.length == 1"> <!--병합하지 않는 경우-->
      <tr @click="selectRow('table', index)">
        <td class="ta-c">{{ item.COL1 }}</td>
        <td class="ta-c">
          <button>{{ item.COL2 }}</button>
        </td>
        <td class="ta-c">{{ item.COL3 }}</td>
        <td class="ta-l">{{ item.subInfo[0].COL4 }}</td>
        <td class="ta-r">{{ item.subInfo[0].COL5 }}</td>
        <td class="ta-c">{{ item.subInfo[0].COL6 }}</td>
        <td class="ta-r">{{ item.subInfo[0].COL7 }}</td>
        <td class="ta-c">{{ item.subInfo[0].COL8 }}</td>
      </tr>
    </template>
  </template>
</tbody>