Bootstrap Table Webpack

تعلم كيفية استخدام Bootstrap Table Vue Component في مشروعك باستخدام webpack.

استيراد JavaScript

استيراد JavaScript لـ Bootstrap Table عن طريق إضافة هذا السطر إلى نقطة دخول التطبيق (عادةً index.js أو app.js):

import 'bootstrap-table'

بالطبع، يمكنك أيضًا استيراد الموضوعات (themes) أو الترجمات (locales) أو الإضافات (extensions) التي تحتاجها:

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

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

// import extension and dependencies
import 'tableexport.jquery.plugin'
import 'bootstrap-table/dist/extensions/export/bootstrap-table-export.min.js'

بشكل افتراضي، يعتمد Bootstrap Table على jQuery و Bootstrap و Popper، وهذه تعرف على أنه peerDependencies، مما يعني أنك ستحتاج للتأكد من إضافة كل منها إلى package.json باستخدام npm install --save jquery bootstrap popper.js.

استيراد CSS

استيراد CSS لـ Bootstrap Table عن طريق إضافة هذا السطر إلى نقطة دخول التطبيق:

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

بالطبع، يمكنك أيضًا استيراد الموضوعات أو الإضافات التي تحتاجها:

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

// import extension
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>

قالب البداية

يوجد مثال vue-starter في مشروع 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: '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>