Bootstrap Table con Webpack

Scopri come utilizzare il componente Vue di Bootstrap Table nel tuo progetto utilizzando webpack.

Importando JavaScript

Importa il JavaScript di Bootstrap Table aggiungendo questa riga al punto di ingresso della tua applicazione (di solito index.js o app.js):

import 'bootstrap-table'

Naturalmente, puoi anche importare i temi, le lingue o le estensioni di cui hai bisogno:

// importa tema
import 'bootstrap-table/dist/themes/materialize/bootstrap-table-materialize.min.js'

// importa lingua
import 'bootstrap-table/dist/locale/bootstrap-table-zh-CN.min.js'

// importa estensione e dipendenze
import 'tableexport.jquery.plugin'
import 'bootstrap-table/dist/extensions/export/bootstrap-table-export.min.js'

Per impostazione predefinita, Bootstrap Table dipende da jQuery, Bootstrap e Popper, questi sono definiti come peerDependencies, ciò significa che dovrai assicurarti di aggiungerli tutti ai tuoi package.json utilizzando npm install --save jquery bootstrap popper.js.

Importando CSS

Importa il CSS di Bootstrap Table aggiungendo questa riga al punto di ingresso della tua applicazione:

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

Naturalmente, puoi anche importare i temi o le estensioni di cui hai bisogno:

// importa tema
import 'bootstrap-table/dist/themes/materialize/bootstrap-table-materialize.min.css'

// importa estensione
import 'bootstrap-table/dist/extensions/fixed-columns/bootstrap-table-fixed-columns.min.css'

Utilizzo

<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: 'ID Articolo',
          field: 'id'
        },
        {
          field: 'name',
          title: 'Nome Articolo'
        },
        {
          field: 'price',
          title: 'Prezzo Articolo'
        }
      ],
      data: [
        {
          id: 1,
          name: 'Articolo 1',
          price: '$1'
        }
      ],
      options: {
        search: true,
        showColumns: true
      }
    }
  }
}
</script>

Modello di partenza

C’è un esempio vue-starter nel progetto bootstrap-table-example.

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: 'ID Articolo',
          field: 'id'
        },
        {
          field: 'name',
          title: 'Nome Articolo'
        }, {
          field: 'price',
          title: 'Prezzo Articolo'
        }
      ],
      data: [
        {
          id: 1,
          name: 'Articolo 1',
          price: '$1'
        },
        {
          id: 2,
          name: 'Articolo 2',
          price: '$2'
        },
        {
          id: 3,
          name: 'Articolo 3',
          price: '$3'
        },
        {
          id: 4,
          name: 'Articolo 4',
          price: '$4'
        },
        {
          id: 5,
          name: 'Articolo 5',
          price: '$5'
        }
      ],
      options: {
        search: true,
        showColumns: true
      }
    }
  }
}
</script>