Webpack

webpack을 사용하는 프로젝트에서 Bootstrap Table Vue 구성 요소를 통합하는 방법을 알아보세요.

JavaScript 가져오기

애플리케이션의 진입 파일(일반적으로 index.js 또는 app.js)에 다음 문을 추가하여 Bootstrap Table의 JavaScript를 가져옵니다:

import 'bootstrap-table'

물론 필요에 따라 테마, 현지화 또는 확장 기능을 가져올 수도 있습니다:

// 테마 가져오기
import 'bootstrap-table/dist/themes/materialize/bootstrap-table-materialize.min.js'

// 현지화 가져오기
import 'bootstrap-table/dist/locale/bootstrap-table-ko-KR.min.js'

// 확장 기능 및 종속성 가져오기
import 'tableexport.jquery.plugin'
import 'bootstrap-table/dist/extensions/export/bootstrap-table-export.min.js'

기본적으로 Bootstrap Table은 jQuery, Bootstrap 및 Popper에 의존합니다. 이러한 종속성은 peerDependencies로 정의되어 있으므로 npm install --save jquery bootstrap popper.js 명령을 사용하여 package.json에 추가해야 합니다.

CSS 가져오기

애플리케이션 진입 파일에 다음 문을 추가하여 Bootstrap Table의 CSS를 가져옵니다:

import 'bootstrap-table/dist/bootstrap-table.min.css'

물론 필요에 따라 테마 또는 확장 기능을 가져올 수도 있습니다:

// 테마 가져오기
import 'bootstrap-table/dist/themes/materialize/bootstrap-table-materialize.min.css'

// 확장 기능 가져오기
import 'bootstrap-table/dist/extensions/fixed-columns/bootstrap-table-fixed-columns.min.css'

사용 예제

<template>
  <BootstrapTable
    :columns="columns"
    :data="data"
    :options="options"
  />
</template>

<script>
import BootstrapTable from 'bootstrap-table/dist/bootstrap-table-vue.js'

export default {
  components: {
    BootstrapTable
  },
  data () {
    return {
      columns: [
        {
          title: 'Item ID',
          field: 'id'
        },
        {
          field: 'name',
          title: 'Item Name'
        },
        {
          field: 'price',
          title: 'Item Price'
        }
      ],
      data: [
        {
          id: 1,
          name: 'Item 1',
          price: '$1'
        }
      ],
      options: {
        search: true,
        showColumns: true
      }
    }
  }
}
</script>

시작 템플릿

bootstrap-table-example 프로젝트에서 vue-starter 예제를 제공합니다.

plugins/jquery.js

import jQuery from 'jquery'
window.jQuery = jQuery

plugins/table.js

import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap-table/dist/bootstrap-table.min.css'

import './jquery.js'
import Vue from 'vue'
import 'bootstrap'
import 'bootstrap-table/dist/bootstrap-table.js'
import BootstrapTable from 'bootstrap-table/dist/bootstrap-table-vue.esm.js'

Vue.component('BootstrapTable', BootstrapTable)

main.js

import './plugins/table.js'

View.vue

<template>
  <BootstrapTable :columns="columns" :data="data" :options="options"></BootstrapTable>
</template>

<script>
export default {
  data () {
    return {
      columns: [
        {
          title: 'Item ID',
          field: 'id'
        },
        {
          field: 'name',
          title: 'Item Name'
        }, {
          field: 'price',
          title: 'Item Price'
        }
      ],
      data: [
        {
          id: 1,
          name: 'Item 1',
          price: '$1'
        },
        {
          id: 2,
          name: 'Item 2',
          price: '$2'
        },
        {
          id: 3,
          name: 'Item 3',
          price: '$3'
        },
        {
          id: 4,
          name: 'Item 4',
          price: '$4'
        },
        {
          id: 5,
          name: 'Item 5',
          price: '$5'
        }
      ],
      options: {
        search: true,
        showColumns: true
      }
    }
  }
}
</script>