vue-good-table로 간단하게 표 만들기

개시하다

vue-good-table를 사용하면 간단하고 효율적인 표를 만들 수 있습니다.
이 글은 설치 방법 등을 좋아하지 않는다.다음 페이지 참조!
https://xaksis.github.io/vue-good-table/

기본 기능

columns와rows만 지정하면 최소한의 표를 만들 수 있습니다.

<template>
  <div>
    <vue-good-table
      :columns="columns"
      :rows="rows"/>
  </div>
</template>

<script>
export default {
  data(){
    return {
      columns: [
        { label: '名前', field: 'name' },
        { label: '年齢', field: 'age', type: 'number' },
        { label: '性別', field: 'sex' },
      ],
      rows: [
        { id:1, name:"太郎", age: 20, sex: '男性' },
        { id:2, name:"花子", age: 24, sex: '女性' },
        { id:3, name:"次郎", age: 16, sex: '男性' },
      ],
    };
  },
};
</script>

필터 기능

전역 필터와 열 필터를 간단하게 만들 수 있습니다.

전역 필터

검색 옵션을 지정하면 전체 필터를 할 수 있습니다.

<vue-good-table
    :columns="columns"
    :rows="rows"
    :search-options="{
      enabled: true,
      placeholder: '検索したい文字を入力してください'
    }"
/>

열 필터

columns에서 Filter Options를 지정하여 필터링할 수 있습니다.
필터로 FilterDropdownItems를 사용할 수도 있습니다.

<script>
  columns: [
    {
      label: '名前',
      field: 'name',
      filterOptions: {
        enabled: true,
      }
    },
    {
        label: '年齢',
        field: 'age',
        type: 'number',
    },
    {
        label: '性別',
        field: 'sex',
        filterOptions: {
            enabled: true,
            filterDropdownItems: [
              { text: '男性', value: '男性' },
              { text: '女性', value: '女性' },
              { text: 'その他', value: 'その他' },
            ]
        }
    },
  ],
</script>

!
Enter에서 검색 트리거 클릭 시 변경, 필터링된 데이터processedRows 취득 등 다양한 기능이 있다.

정렬 기능

기본 정렬 순서를 지정할 수 있습니다.

<template>
  <div class="m-5">
    <vue-good-table
      :columns="columns"
      :rows="rows"
      :sort-options="{
        initialSortBy: {field: 'age', type: 'desc'},
      }"
    />
  </div>
</template>

여러 열 조합의 정렬을 간단하게 지정할 수도 있다.

<template>
  <div class="m-5">
    <vue-good-table
      :columns="columns"
      :rows="rows"
      :sort-options="{
        initialSortBy: [
          {field: 'sex', type: 'desc'},
          {field: 'age', type: 'desc'},
        ]
      }"
    />
  </div>
</template>

사용자 정의 데이터 표시

테이블에 표시되는 데이터 스타일 등을 간단하게 사용자 정의할 수 있습니다.

<template>
  <div class="m-5">
    <vue-good-table
      :columns="columns"
      :rows="rows"
    >
      <template slot="table-row" slot-scope="props">
        <span v-if="props.column.field == 'age'">
          <span v-if="props.row.age >= 20" style="font-weight: bold; color: blue;">{{props.row.age}}</span>
          <span v-else style="font-weight: bold; color: red;">{{props.row.age}}</span>
        </span>
        <span v-else>
          {{props.formattedRow[props.column.field]}}
        </span>
      </template>
    </vue-good-table>
  </div>
</template>

!
표시된 문구도 수정할 수 있지만 위에서 설명한 필터와 정렬은 더 이상 작동하지 않습니다

테이블 스타일

theeme 및 style-Class를 변경하여 전체 테이블 스타일을 변경할 수 있습니다.

<template>
  <div class="m-5">
    <vue-good-table
      :columns="columns"
      :rows="rows"
      theme="black-rhino"
      style-class="vgt-table striped"
    />
  </div>
</template>

끝말

이번에 소개한 것은 vue-good-table의 일부 기능일 뿐입니다. 조금만 참고해 주시면 좋겠습니다!
마지막으로 홍보, 스웨프가 엔지니어를 모집 중입니다.관심 있는 사람은 아래 링크에서 응모하세요!
https://corp.sweeep.ai/recruit