[vue] tree table primeVUE 적용, 쉽지 않아서 라이브러리 변경
※ 목표 : 트리구조가 들어가있는 TREE TABLE
tree 구조의 테이블을 적용하는 화면이 있어 찾던 중 primeVUE라는 좋은 라이브러리를 발견했다.
없는게 없는데 적용 중에 자꾸 같은 에러가 발생한다.
error in ./node_modules/primevue/treetable/treetable.esm.js
Module parse failed: Unexpected token (285:25)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| (openBlock(true), createBlock(Fragment, null, renderList($props.columns, (col, i) => {
| return (openBlock(), createBlock("td", {
> key: col.props?.columnKey||col.props?.field||i,
| style: col.props?.bodyStyle,
| class: col.props?.bodyClass
계속 같은 에러가 발생하고, 시간은 많이 소모했고 뭘해도 똑같아서 그냥 포기했다. 다른 라이브러리를 찾아보기로.
그래서 중국인이 만든것으로 추정되는 라이브러리 ㄷㄷㄷㅈ
https://github.com/MisterTaki/vue-table-with-tree-grid
GitHub - MisterTaki/vue-table-with-tree-grid: A table (with tree-grid) component for Vue.js 2.0. (Its style extends @iView)
A table (with tree-grid) component for Vue.js 2.0. (Its style extends @iView) - GitHub - MisterTaki/vue-table-with-tree-grid: A table (with tree-grid) component for Vue.js 2.0. (Its style extends @...
github.com
ZKTable 컴포넌트!!!
이 라이브러리 안되는게 없다. 뭐 예제도 있고 적용 방법도 쉽고 기능도 대부분 있는 것 같고 괜찮다.
맨 위에 캡처화면이 이 라이브러리로 만든 것이다.
1. 가이드대로 install하고,
import ZkTable from "vue-table-with-tree-grid";
2. 컴포넌트 등록하고
Vue.use( ZKTable )
3. 소스코드
html
<template>
<ZkTable
ref="table"
sum-text="sum"
index-text="#"
:data="shareholderKybList"
:columns="shareholderKycColumns"
:stripe="props.stripe"
:border="props.border"
:show-header="props.showHeader"
:show-summary="props.showSummary"
:show-row-hover="props.showRowHover"
:show-index="props.showIndex"
:tree-type="props.treeType"
:is-fold="props.isFold"
:expand-type="props.expandType"
:selection-type="props.selectionType"
>
<template slot="status" scope="scope">
<v-chip
:color="getColor(scope.row.status)"
dark
>
{{ scope.row.status }}
</v-chip>
</template>
<template slot="document" scope="scope">
<span
class="text-decoration-underline cursor-pointer"
@click="showModal = true"
>{{ scope.row.document }}</span
>
</template>
<template slot="edit" scope="scope">
<div
class="cursor-pointer"
@click="showEditShareholderKycModal = true"
>
{{ scope.row.edit }}
<b-icon
class="cursor-pointer"
scale="2"
variant="success"
icon="pencil-square"
></b-icon>
</div>
</template>
</ZkTable>
</template>js
<script>
import ZkTable from "vue-table-with-tree-grid";
export default {
name: "custom-page",
components: {
ZkTable
},
data() {
return {
props: {
stripe: false,
border: false,
showHeader: true,
showSummary: false,
showRowHover: true,
showIndex: false,
treeType: true,
isFold: false, //default가 전부 열려있게 할 지 여부
expandType: false,
selectionType: true
},
shareholderKybList: [
{
type: "Corporate",
ownerName: "Steve",
rate: 30,
dateOfBirth: "1972-11-22",
nationality: "JPN",
status: "approved",
document: "ID Card",
updateAt: "2020-11-08",
children: [
{
type: "Corporate",
ownerName: "Apple",
rate: 20,
dateOfBirth: "1972-11-22",
nationality: "JPN",
status: "Pending",
document: "ID Card",
updateAt: "2020-11-08",
children: [
{
type: "Corporate",
ownerName: "Hilton",
rate: 70,
dateOfBirth: "1972-11-22",
nationality: "JPN",
status: "Pending",
document: "ID Card",
updateAt: "2020-11-08"
},
{
type: "Corporate",
ownerName: "Jack",
rate: 90,
dateOfBirth: "1972-11-22",
nationality: "JPN",
status: "Approved",
document: "ID Card",
updateAt: "2020-11-08",
children: [
{
type: "Individual",
ownerName: "Lowell",
rate: 80,
dateOfBirth: "1972-11-22",
nationality: "JPN",
status: "Pending",
document: "ID Card",
updateAt: "2020-11-08"
},
{
type: "Corporate",
ownerName: "Wendy",
rate: 30,
dateOfBirth: "1972-11-22",
nationality: "JPN",
status: "Approved",
document: "ID Card",
updateAt: "2020-11-08",
children: [
{
type: "Individual",
ownerName: "Jack",
rate: 50,
dateOfBirth: "1972-11-22",
nationality: "JPN",
status: "Pending",
document: "ID Card",
updateAt: "2020-11-08"
},
{
type: "Individual",
ownerName: "Freddie Mercury (프레디머큐리) ",
rate: 25,
dateOfBirth: "1972-11-22",
nationality: "JPN",
status: "Approved",
document: "ID Card",
updateAt: "2020-11-08"
}
]
}
]
}
]
},
{
type: "Individual",
ownerName: "Nammy",
rate: 60,
dateOfBirth: "1972-11-22",
nationality: "JPN",
status: "Pending",
document: "ID Card",
updateAt: "2020-11-08"
}
]
},
{
type: "Individual",
ownerName: "Kyle",
rate: 50,
dateOfBirth: "1972-11-22",
nationality: "JPN",
status: "Pending",
document: "ID Card",
updateAt: "2020-11-08"
}
],
shareholderKycColumns: [
{
label: "ownerName",
prop: "ownerName",
minWidth: "280px"
},
{
label: "dateOfBirth",
prop: "dateOfBirth",
minWidth: "100px"
},
{
label: "nationality",
prop: "nationality",
minWidth: "100px"
},
{
label: "status",
prop: "status",
minWidth: "100px",
type: "template",
template: "status"
},
{
label: "document",
prop: "document",
minWidth: "100px",
type: "template",
template: "document"
},
{
label: "edit",
prop: "edit",
minWidth: "60px",
type: "template",
template: "edit"
}
]
};
},
methods: {
getColor(status) {
console.log(status);
if ("Approved" == status) return "green";
else return "orange";
},
}
};
</script>
컬럼 안에 태그를 넣어야할 때는 data의 column 속성( 필자 소스코드에서는 shareholderKycColumns )에 template과 prop 이름을 정의해주고 template slot을 이용해서 넣을 수 있다.
출력요소에 router-link를 정의해야하는 경우, bootstrap button을 넣어야하는 경우 등 확장성있게 사용할 수 있다!
그리고 무엇보다.. 걱정했던 checkbox가 된다 ㅎㅎ
아마 ZKTable옵션 props의 selectionType이 해당 옵션이었던 것 같다. true로 설정해놓으면 select box가 보여짐 ^^