서비스중엔 페이지에서
backbone.js, require.js를 사용해왔는데, vue.js로 바꾸는 작업을 하게 되었습니다.
table pagination, sort 기능이 필요했는데,
정확히 요구사항에 맞는 컴포넌트가 있습니다.
여기에 플러스
row 선택하는 것, draggable rows, 컬럼을 직접 넣을 수도 있고,
컬럼을 json 형태로 줄 수도 있고요,
buefy에 테이블이 여러개 있는데 필요한 요소들이 다 따로 떨어져있어서 여기저기 찾으면서
테이블을 커스터마이징 할 수 있을것 같아요.
https://buefy.org/documentation/table#pagination-and-sorting
<b-table
:data="data"
:paginated="isPaginated"
:per-page="perPage"
:current-page.sync="currentPage"
:pagination-simple="isPaginationSimple"
:pagination-position="paginationPosition"
:default-sort-direction="defaultSortDirection"
:sort-icon="sortIcon"
:sort-icon-size="sortIconSize"
default-sort="user.first_name"
aria-next-label="Next page"
aria-previous-label="Previous page"
aria-page-label="Page"
aria-current-label="Current page">
<template slot-scope="props">
<b-table-column field="id" label="ID" width="40" sortable numeric>
{{ props.row.id }}
</b-table-column>
<b-table-column field="user.first_name" label="First Name" sortable>
{{ props.row.user.first_name }}
</b-table-column>
<b-table-column field="user.last_name" label="Last Name" sortable>
{{ props.row.user.last_name }}
</b-table-column>
<b-table-column field="date" label="Date" sortable centered>
<span class="tag is-success">
{{ new Date(props.row.date).toLocaleDateString() }}
</span>
</b-table-column>
<b-table-column label="Gender">
<span>
<b-icon pack="fas"
:icon="props.row.gender === 'Male' ? 'mars' : 'venus'">
</b-icon>
{{ props.row.gender }}
</span>
</b-table-column>
</template>
</b-table>
...
<script>
const data = require('@/data/sample.json')
export default {
data() {
return {
data,
isPaginated: true,
isPaginationSimple: false,
paginationPosition: 'bottom',
defaultSortDirection: 'asc',
sortIcon: 'arrow-up',
sortIconSize: 'is-small',
currentPage: 1,
perPage: 5
}
}
}
</script>data : 테이블에 들어갈 데이터
보통 [{},{},...] 형식입니다. 배열안에 객체가 들어가있는 일반적인 json 데이터 형식입니다.
TABLE API
https://buefy.org/documentation/table/#api-view
그리고 pagination의 경우
<b-table>의 속성중 paginated에 boolean type으로 주고 사용합니다.
- :paginated : 페이지네이션을 테이블에 추가할지 여부
- :per-page : row의 개수를 뜻합니다.
- :current-page: 숫자타입이며, 페이지네이션을 쓴다면, 현재 페이지의 테이블 데이터를 말합니다.
:current-page.sync 숫자 타입이며, .sync를 붙임으로써 양방향 바인딩을 지원해줍니다. - :default-sort: 문자열로 컬럼만 넣으면 해당 컬럼을 기준으로 정렬한 데이터를 가져옵니다.
문자열 배열타입이고, ['컬럼','정렬방법'] 초기 정렬할 컬럼을 줍니다. - :default-sort-direction : 'asc', 'desc' 문자열로 타입이고, 내림차순, 오름차순을 정합니다.
- :sortable: Boolean 타입, 어떤 컬럼이 정렬된건지
<b-table
:data="data"
:paginated="isPaginated"
:per-page="perPage"
:current-page.sync="currentPage"
:pagination-simple="isPaginationSimple"
:pagination-position="paginationPosition"
:default-sort-direction="defaultSortDirection"
:sort-icon="sortIcon"
:sort-icon-size="sortIconSize"
default-sort="user.first_name"
aria-next-label="Next page"
aria-previous-label="Previous page"
aria-page-label="Page"
aria-current-label="Current page">
...
</b-table>그러면 페이지네이션은 어떻게 되지?
얘같은 경우는 5000 데이터가 있으면 싹다 가져와서 하는데 사용하는데
저는.. 특정 페이지에 해당하는 데이터만 가져올건데.. 흠,
이전에는 limit, offset를 파라미터로 줘서 SQL에서 limit, offset 을 사용해서 특정 페이지에 해당하는 데이터만 가져왔습니다.
이제 지금 수정해야할 api를 살펴봐야겠네요.
직접 프로젝트에서 코드 따라가니까 일단은 모르는 내용이 너무 많기도 하고, 고도화 되어있는 프로젝트이기 때문에
일단은
1.기존 admin에서 새로 만들려는 화면을 보고 network 탭에서 api를 알아내서
2.mock api를 만들어서 화면만 일단 만들어 봅시다.
api 파라미터 보니까 page_id, page_size 가 내가 했던 스타일과 역할을 하는 데이터인거 같다.
결국 같은 구조인것을 확인했음으로 이전에 직접 테이블을 구현했지만 이번에는 buefy 테이블로 나머지 화면을 만들어보겠습니다.
