Sort Options

Set of options related to table sorting

1
2
3
4
5
6
7
8

<vue-good-table
  :columns="columns"
  :rows="rows"
  :sort-options="{
    enabled: true,
    initialSortBy: {field: 'name', type: 'asc'}
  }">
</vue-good-table>

enabled

type: Boolean (default: true)

Enable/disable sorting on table as a whole.

Search Options

Vue-good-table supports two ways of filtering the table.

1. A global search that searches through all records in the table
2. Column filters that filter based on a given column

Table Events

@on-row-click

event emitted on table row click

1
2
3
4

<vue-good-table
  :columns="columns"
  :rows="rows"
  @on-row-click="onRowClick">

1
2
3
4
5
6
7
8
9

methods: {
  onRowClick(params) {
    // params.row - row object 
    // params.pageIndex - index of this row on the current page.
    // params.selected - if selection is enabled this argument 
    // indicates selected or not
    // params.event - click event
  }
}

Table Options

These options relate to the table as a whole

columns

type: Array

Array containing objects that describe table columns. The column object itself can contain many configurable properties.

1
2
3
4
5
6
7
8

[
    {
      label: 'Name',
      field: 'name',
      filterable: true,
    }
    //...
]

Getting Started

Installation

Install with npm:

1

npm install --save vue-good-table

Import globally in app:

1
2
3
4
5
6

import VueGoodTablePlugin from 'vue-good-table';

// import the styles
import 'vue-good-table/dist/vue-good-table.css'

Vue.use(VueGoodTablePlugin);

이 페이지는 컴포넌트 기초를 읽었다는 것을 가정합니다. 컴포넌트가 처음이라면 먼저 읽어야 합니다.

keep-alive 동적 컴포넌트

초기에는, 탭 인터페이스에서 컴포넌트들을 전환하기 위해서 is 특성을 사용했습니다. :

1

<component v-bind:is="currentTabComponent"></component>

액션

액션은 변이와 유사합니다. 몇가지 다른 점은,

• 상태를 변이시키는 대신 액션으로 변이에 대한 커밋을 합니다.
• 작업에는 임의의 비동기 작업이 포함될 수 있습니다.

Strict 모드

strict 모드를 사용하기 위해, strict: true를 Vuex 저장소를 만들 때 추가하면 됩니다.

1
2
3
4

const store = new Vuex.Store({
  // ...
  strict: true
})

엄격 모드에서는 Vuex 상태가 변이 핸들러 외부에서 변이 될 때 마다 오류가 발생합니다. 이렇게하면 디버깅 도구로 모든 상태 변이를 명시적으로 추적 할 수 있습니다.

개발 vs. 배포

배포시 strict 모드를 켜지 마십시오! Strict 모드는 부적절한 변이를 감지하기 위해 상태 트리를 자세히 관찰합니다. 성능 이슈를 피하기 위해 배포 환경에서 이를 해제 하십시오.

상태

단일 상태 트리

Vuex는 단일 상태 트리 를 사용합니다. 즉, 이 단일 객체는 모든 애플리케이션 수준의 상태를 포함하며 “원본 소스” 역할을 합니다. 이는 각 애플리케이션마다 하나의 저장소만 갖게 된다는 것을 의미합니다. 단일 상태 트리를 사용하면 특정 상태를 쉽게 찾을 수 있으므로 디버깅을 위해 현재 앱 상태의 스냅 샷을 쉽게 가져올 수 있습니다.

단일 상태 트리는 모듈성과 충돌하지 않습니다. 나중에 상태와 변이를 하위 모듈로 분할하는 방법에 대해 설명합니다.

Vuex 상태를 Vue 컴포넌트에서 가져오기

그러면 Vue 컴포넌트에서 저장소 내부의 상태를 어떻게 표시하나요? Vuex 저장소는 반응적이기 때문에 저장소에서 상태를 “검색”하는 가장 간단한 방법은 계산된 속성내에서 일부 저장소 상태를 가져오는 것입니다.

1
2
3
4
5
6
7
8
9

// Counter 컴포넌트를 만듭니다
const Counter = {
  template: `<div>{{ count }}</div>`,
  computed: {
    count () {
      return store.state.count
    }
  }
}

플러그인

Vuex 저장소는 각 변이에 대한 훅을 노출하는 plugins 옵션을 허용합니다. Vuex 플러그인은 저장소를 유일한 전달인자로 받는 함수입니다.

1
2
3
4
5
6
7

const myPlugin = store => {
  // 저장소가 초기화 될 때 불립니다.
  store.subscribe((mutation, state) => {
    // 매 변이시마다 불립니다.
    // 변이는 { type, payload } 포맷으로 제공됩니다.
  })
}

그리고 다음과 같이 사용할 수 있습니다.

1
2
3
4

const store = new Vuex.Store({
  // ...
  plugins: [myPlugin]
})