1. vuetifyjs 사용
https://v15.vuetifyjs.com/ko/components/data-tables/
Expandable Table 검색해서 참고 사용.
2. type="expand" 사용
https://element-plus.org/en-US/component/table.html#expandable-row
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 를 이용해서 별도의 기능 구현이 필요하다.
'FRONT > Vue.js' 카테고리의 다른 글
[Vue.js] 카드 테이블 (Card Table) 만들기 (0) | 2023.07.10 |
---|---|
[Vue.js] 체크박스(checkbox) 체크 유무를 특정 값으로 바인딩 하기 (0) | 2023.05.19 |
[Vue.js] Vue3 데이터 중복 검사 (0) | 2023.04.11 |
[Vue.js] Vue3 : Vuetify Form-validation 유효성 검사 (0) | 2023.04.11 |
[Vue.js] Node.js , Vue.js 설치하기 - Windows 10 (0) | 2023.01.16 |