[VueJS] Treegrid

부트스트랩 Treegrid

Treegrid jquery plugin

 

이런 형태의 Treegrid가 필요해서 해당 라이브러리로 시도했는데 기존 프로젝트가 부트스트랩 v4라 그런지

해당 라이브러리가 이런 에러가 뜨면서 사용이 불가능했다.

npm install로도 설치 시도해보고 js파일을 직접 프로젝트내에 저장을 해봐도 다같은 에러가 발생

위 라이브러리 사용 시도시 발생하는 에러

위 라이브러리 사용 시도시 발생하는 에러

위 라이브러리 사용 시도시 발생하는 에러

 

여러 라이브러리를 다 찾아봤는데 동일한 에러가 발생해서 라이브러리 사용하는 것을 포기하고

직접 테이블 안에 테이블을 삽입하는 방식으로 진행해보았다.

(기존의 테이블 형태를 유지하고 싶어서 부트스트랩 지원하는 라이브러리를 찾았으나 찾을수없어서,,)

 

ㅁ 실행코드

화면 구성을 위한 코드

<template>
  <div class="content">
    <div class="container-fluid">
      <div class="row">
        <div class="col-12">
          <div class="card">
            <div class="card-body table-responsive p-0">
              <table class="table table-hover text-nowrap">
                <thead>
                  <tr>
                    <th />
                    <th>수업</th>
                    <th>인원</th>
                    <th>수업시간</th>
                  </tr>
                </thead>
                <tbody>
                  <template v-for="(c, index) in classes">
                    <tr>
                      <td>
                        <i class="expandable-table-caret fas fa-fw"
                           :class="{'fa-caret-right':!classToggles[index].toggled, 'fa-caret-down':classToggles[index].toggled}"
                           @click="classToggles[index].toggled=!classToggles[index].toggled"
                        />
                      </td>
                      <td>{{ c.className }}</td>
                      <td>{{ c.personnel }}</td>
                      <td>{{ c.time }}</td>
                    </tr>
                    <template v-if="classToggles[index].toggled">
                      <tr colspan="4">
                        <td />
                        <td colspan="3">
                          <table class="table table-hover text-nowrap overflow-x-auto">
                            <thead>
                              <tr>
                                <th>교수</th>
                                <th>분반</th>
                              </tr>
                            </thead>
                            <tbody>
                              <tr v-for="info in c.classInfos">
                                <td>{{ info.professor }}</td>
                                <td>{{ info.classNum }}</td>
                              </tr>
                            </tbody>
                          </table>
                        </td>
                      </tr>
                    </template>
                  </template>
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

 

기능 실행을 위한 vuejs 코드

import Vue from 'vue';

export default Vue.extend({
  data() {
    return {
      classes: [
        {
          id: '1', className: 'web', personnel: '30', time: '10:00-12:00', classInfos: [{ professor: 'Kim', classNum: '1' }, { professor: 'Park', classNum: '2' }],
        },
        {
          id: '2', className: 'app', personnel: '40', time: '11:00-13:00', classInfos: [{ professor: 'Jang', classNum: '1' }, { professor: 'Lee', classNum: '2' }],
        },
        {
          id: '3', className: 'AI', personnel: '35', time: '15:00-16:00', classInfos: [{ professor: 'Kim', classNum: '1' }, { professor: 'Jang', classNum: '2' }],
        },
      ],
      classToggles: [],
    };
  },
  mounted() {
    this.classToggles = [];
    for (const cl of this.classes) {
      this.classToggles.push({
        id: cl.id,
        toggled: false,
      });
    }
  },
});

 

ㅁ 실행화면