[Vue.js] 접히는(folding) 테이블 만들기 - Expandable Table

 

 

1. vuetifyjs 사용

 

https://v15.vuetifyjs.com/ko/components/data-tables/

Data tables Component — Vuetify.js

 

Expandable Table 검색해서 참고 사용.

 

 

 

2.  type="expand"  사용

 

https://element-plus.org/en-US/component/table.html#expandable-row

Table | Element Plus

 

Expandable row 검색해서 참고 사용.

type 과 slot 을 사용하여 테이블 생성.

 

기본 틀이 잡혀있어서 상위 테이블 안에 하위 테이블 만들기 용이하다.

 

나는 상위 테이블 안에 하위 테이블을 만들고 싶었다.

상위 안에 하위가 있고 하위 정보를 누르면 상세페이지로 이동한다.

재조회 버튼 클릭 시 1페이지로 리셋 되게 만들었다.

 

아래는 내가 응용해서 실사용한 테이블 템플릿이다.

 

 

<template>
  <el-table 
    id="tb"
    class="parentTable"
    :data="sample"
    @expand-change="handleToggleRowExpansion"
  >
  <el-table-column type="expand">
    <template #default="props">
      <div m="4">
        <el-form-item class="labelPadding" label="" prop="">
        //
        </el-form-item>
        <h3 class="titleLabel"></h3>
        <div class="btnSec taR reSearchBtn">
          <el-button type="primary" @click="downPageMove(1)">재조회</el-button>
        </div>
        <el-table
          class="childTable"
          :data="sample"
        >
          <el-table-column label="" prop="" />
          <el-table-column label="" prop="" />
          <el-table-column label="" prop="" />
          <el-table-column label="" prop="" />
          <el-table-column label="" prop="" />
        </el-table>
        <ComnPagination :curPage="" :totalPage="" @pagemove="downPageMove" />
      </div>
    </template>
  </el-table-column>
  <el-table-column label="" prop="" />
  <el-table-column label="" prop="" />
  <el-table-column label="" prop="" />
  <el-table-column label="" prop="" />
  <el-table-column label="" prop="" />
  </el-table>
  <ComnPagination curPage="" :totalPage="" @pagemove="pagemove" />
</template>

 

 

 

 

 

 

화면엔 대략 이렇게 보이는데,  보안 문제로 모자이크 했다.

폴딩 시 화살표가 움직이지 않으면 @expand-change 를 이용해서 별도의 기능 구현이 필요하다.