Vue.js - [v-if]를 갖는 조건부 그룹 만들기

v-direcitves 중 하나인 v-if는 v-show와 같이 특정 html 요소를 보이거나 감추는 역할을 합니다. 두 디렉티브의 차이는 DOM을 만드는지 여부에 달려있는데, v-if는 아예 DOM 요소를 만들어내지 않고, v-show는 DOM 요소를 만들되 display:none 효과를 가져옵니다.

개발 상황에 따라 적당한 디렉티브를 활용하면 됩니다.

이번에는 이러한 v-if의 특성을 이용해 조건에 따라 노출방식이 달라지는 테이블을 만들어보려고 합니다.

노출 기준

노출 기준은 변경 이력이 있는지 여부로 둡니다. history.count의 데이터(변경 이력의 수)가 있다면, 해당 데이터를 표시하는 테이블을 보여주고, 변경 이력이 없다면, 조회된 데이터가 없습니다. 라는 문구를 노출하도록 합니다.

전체 코드(template 부분)

<template>
    <div>
      <table>
      
      	<!-- 
        변경이력이 있으면 노출시킬 요소
        history.count > 0 조건을 만족시키면 노출됨
        -->
        <template v-if="history.count > 0">
          <colgroup>
            <col style="width: 200px;" /> <!-- 변경일시 -->
            <col style="width: 400px;"/> <!-- 내용 -->
          </colgroup>
          <thead>
            <tr>
              <th scope="col">변경일시</th>
              <th scope="col">내용</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(Info, index) in history.dataList" :key="index">
              <td>{{Info.UpdateData}}</td>
              <td>{{Info.Content}}</td>
            </tr>
          </tbody>
        </template>
        
        <!-- 
        변경이력이 없으면 노출시킬 요소
        위의 조건을 충족시키지 못하면 노출되는 요소
        -->
        <tr v-else>
          <td colspan="3">조회된 데이터가 없습니다.</td>
        </tr>
      </table>
    </div>  
</template>

변경이력이 있을 경우

변경 이력이 없을 경우

# colgroup에 대한 부가 설명

colgroup 태그는 바로 뒤에 나오는 테이블의 td 태그에 적용할 스타일을 해당 태그에서 미리 적용할 때 사용합니다. 일반적으로 각 컬럼의 길이를 설정할 때 많이 쓰입니다.

위에서 작성했던 코드를 가져와서 살펴보면, thead를 작성하기 전에 colgroup 으로 각 칼럼의 스타일(width)을 미리 정의해서 적용했습니다. 위치는 테이블 태그 사이에만 존재하면 상관 없습니다.

<colgroup>
  <col style="width: 200px;" /> <!-- 변경일시 -->
  <col style="width: 400px;"/> <!-- 내용 -->
</colgroup>
<thead>
  <tr>
    <th scope="col">변경일시</th>
    <th scope="col">내용</th>
  </tr>
</thead>