[quasar] 정말 유용한 q-table 컴포넌트

저는 요즘 quasar로 요즘 관리자 페이지를 개발하고 있는데요. 관리자페이지는 서비스의 여러가지 데이터를 CRUD해야하는 페이지들이 많기 때문에 대부분의 페이지에서 스크롤압박이 느껴지게 하는 목록형태가 빠짐없이 등장하곤합니다. 이러한 여러 필드가 있는 데이터들을 그려줄 때 quasar의 q-table 컴포넌트를 정말 유용하게 사용하고 있어요.

q-table 컴포넌트는 기본적으로 이렇게 생겼는데요.

객체배열형태로 칼럼과 칼럼에 들어갈 필드를 지정해주고 데이터를 붙여주면 이렇게 유용한 테이블을 알아서 그려줍니다.

 

 

<template lang="pug">
<q-table
      title="테이블"
      :data="member"
      :columns="columns"
      row-key="name"
    />
<template/>
  <script>
export default {
  data () {
    return {
      columns: [
      	{ name: 'name', label: '이름' }
      ],
      member: [
        { name: 'name', label: '이민우' },
        { name: 'name', label: '김연아' },
        { name: 'name', label: '홍대용' },
        { name: 'name', label: '박지원' },
      ]
    }
  }
}
</script>

 

이런 식으로 script 안에 데이터와 칼럼을 지정해주면 됩니다. 일일이 머스태쉬 안에 프로퍼티를 집어넣는 노가다를 할 필요없이 자동으로 테이블을 그려주니 정말 편하지요? 또한 칼럼에 속성을 지정해줌으로써 테이블에 다양한 방식의 테이블 데이터를 표현하는 것도 가능한데요.

format() 메소드를 사용하면 데이터의 값과 한줄 row를 받아와서 값을 가공해서 보여줄 수도 있습니다.

 

위와 같은 데이터의 14%, 1%등 퍼센트를 표현하는 기호같은 경우는 

{
    name: 'calories',
    align: 'center',
    label: '칼로리',
    field: 'calories',
    sortable: true,
    format: (val, row) => val ? `${val}%` : '',
},

이런 식으로 간단한 값을 가공하는 함수를 추가해서 데이터를 다채롭게 보여줄 수 있습니다.

q-table은 table 헤더, 바디, 푸터 영역등이 슬롯을 사용해서 응용할 수 있도록 해놓았는데요. 대표적으로 데이터가 없을 때 표현할 수 있는 하단의 푸터 영역도 커스텀으로 가공해서 보여줄 수 있습니다.

예를 들면 이런식으로 테이블로 그려줄 데이터가 없는 경우에, 저 영역에 특별한 이미지나 문구를 집어넣고 싶을 수 있겠죠

그럴 때는 q-table 컴포넌트 안에

<template v-slot:no-data="{ icon, message, filter }">
  <div class="full-width row flex-center text-accent q-gutter-sm">
    <q-icon size="2em" name="sentiment_dissatisfied" />
    <span>
      데이터가 없습니다. ㅠㅠ
    </span>
    <q-icon size="2em" :name="filter ? 'filter_b_and_w' : icon" />
  </div>
</template>

이런 식으로 v-slot:no-data="" 안에 저 영역을 보여줄 조건을 지정해두고, 조건을 만족(데이터가 없는 경우겠죠?) 했을 시 저 문구들이 보여지게 하면 됩니다.