1. b-table 만들기
b-table이 없다면 v-for를 사용해서 배열의 객체를 하나씩 tr, td를 지정해 만들어야 했다.
b-table은 배열 객체만 item으로 넣어주면 알아서 테이블을 생성한다.
https://bootstrap-vue.org/docs/components/table#table
[BootstrapVue
Quickly integrate Bootstrap v4 components with Vue.js
bootstrap-vue.org](https://bootstrap-vue.org/docs/components/table#table)
<b-table hover :items="users">
</b-table>
items에 table에 넣을 배열의 이름을 넣어주면 된다.
결과 사진
2. 테이블 특정 값에 링크 넣기 - 상세 정보로 이동
기존 테이블은 id를 누르면 router-link
로 해당 사용자의 상세 정보 페이지로 이동하도록 하였다.
그런데 b-table은 배열의 값만 가져오기 때문에 link를 추가하기 위해서는 template을 따로 넣어줘야 한다
<template #cell(id)="data">
<router-link :to="data.value">{{ data.value }}</router-link>
</template>
https://forum.vuejs.org/t/how-to-pass-cell-templates-to-a-component-with-b-table/106283
<template #cell(field)="data">
{{ data.item.value }}
</template>
#cell("적용할 필드의 이름") = "data" (data에는 해당 row의 전체 객체가 들어온다)
{ "item": { "id": "a", "password": "change", "name": "change", "email": "change", "age": 99, "img": "#", "orgImg": null },
"index": 0,
"field": { "key": "id", "label": "Id" },
"unformatted": "a",
"value": "a",
"detailsShowing": false,
"rowSelected": false }
data의 내용은 위와 같다.
우리는 id를 가져와야 하기 때문에, data.value
또는 data.item.id
로 id 값을 가져올 수 있다
3. 테이블 column 이름 변경
https://stackoverflow.com/questions/66107427/custom-columns-in-bootstrapvue-table
그리고 column명이 각각의 item의 key로 자동으로 할당된다
이를 수정하기 위해서는 fields라는 data를 선언하면 된다.
fields: [
{
key: "id",
label: "아이디",
},
{
key: "password",
label: "비밀번호",
},
{
key: "name",
label: "이름",
},
{
key: "email",
label: "이메일",
},
{
key: "age",
label: "이름",
},
],
해당 vue의 data, 또는 vuex의 state에 가져오고 싶은 필드와 표시할 필드(label)를 선언한다
<b-table hover :items="searchUsers" :fields="fields">
그리고 b-table에 fields를 추가한다
변경된 표
'FrontEnd > Vue.js' 카테고리의 다른 글
[Vue.js] Vue Template Syntax 뷰 템플릿 문법 (0) | 2022.11.01 |
---|