Bootstrap Table Webpack

بیاموزید که چگونه از کامپونент Vue Bootstrap Table در پروژه خود با استفاده از webpack استفاده کنید.

وارد کردن JavaScript

Bootstrap Table JavaScript را با اضافه کردن این خط به نقطه ورود اپلیکیشن خود وارد کنید (معمولاً index.js یا app.js):

import 'bootstrap-table'

البته، همچنین می‌توانید تم‌ها، محلی‌ها یا افزونه‌های مورد نیاز خود را وارد کنید:

// 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 تعریف شده‌اند، به این معنی که باید اطمینان حاصل کنید که هر دو را با استفاده از npm install --save jquery bootstrap popper.js به package.json خود اضافه می‌کنید.

وارد کردن CSS

Bootstrap Table CSS را با اضافه کردن این خط به نقطه ورود اپلیکیشن خود وارد کنید:

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>