vue bootstrap table로 row 하위에 table 출력하기 (table in table)

 

 

vue bootstrap 의 b-table 을 이용하여 다음과 같이 table 안에 inner table 구조를 만들 수 있다.

 

방법은 row-details slot을 사용하면 된다.

https://bootstrap-vue.org/docs/components/table

BootstrapVue

 

아래에 써놓은 옵션 이외에 필요한 기본옵션 관련해서는  BootstrapVue 공식사이트를 이용하면 된다.

 

 

 

 

옵션설명

* sticky-header : 스크롤로 테이블의 크기를 한정짓고 싶을 때 사용 ( 필자는 docs에서 해당옵션을 못보고 지나가 css로 삽질을 했음 )

* items : 나타내고 싶은 row data

* fields : header에서 출력할 column

* busy : 로딩바로 사용

 

<b-table
              :sticky-header="true"
              :items="amlSubmissions"
              :fields="fields"
              :busy="isBusy"
              @row-clicked="handleRowClicked">
          
          <!-- row-details 안에 들어가는 html 내용들은 row가 열릴 때 나타난다. (row 클릭 시 open toggle)-->
          <template #row-details="row">
              <b-table class="ml-5"
                       v-if="row.item.amlResult.length > 0"
                       :outlined="true"
                       :head-variant="'primary'"
                       :items="row.item.amlResult" :fields="matchesHeader">
               
                <template #cell(report)="data">
                  <b-button variant="primary" @click="downloadAmlReport(data.item.argos_number)">Report</b-button>
                </template>

	<!-- full_name은 fields 에 나타나는 헤더 칼럼이름, 안에 출력하는 forename 데이터는 row에 출력되는 데이터 키이다. -->
                <template #cell(full_name)="data">
                  <span>{{data.item.forename}}</span>
                </template>

              </b-table>
          </template>
          
</b-table>