[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)

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가 보여짐 ^^