首页 发现 帮助
登录
githab
/
bootstrap-table
2
0
派生 0
文件 工单管理 0 合并请求 0 Wiki
浏览代码

Merge pull request #4368 from wenzhixin/feature/vue-docs

Added vue component docs
文翼 6 年之前
父节点
a606faf68b 495c01809b
当前提交
4f7fa31122
共有 9 个文件被更改，包括 477 次插入 和 8 次删除
分列视图 显示文件统计
  1. 18 1
      rollup.config.js
  2. 7 0
      site/_data/nav.yml
  3. 1 1
      site/docs/getting-started/download.md
  4. 142 0
      site/docs/vuejs/browser.md
  5. 65 0
      site/docs/vuejs/component.md
  6. 50 0
      site/docs/vuejs/introduction.md
  7. 186 0
      site/docs/vuejs/webpack.md
  8. 1 1
      src/bootstrap-table.js
  9. 7 5
      src/vue/BootstrapTable.vue

+ 18 - 1
rollup.config.js
查看文件 

@@ -76,7 +76,24 @@ config.push({
 
   ]
 
 })
 
 
-out = 'dist/vue.js'
 
+out = 'dist/bootstrap-table-vue.js'
 
+if (process.env.NODE_ENV === 'production') {
 
+  out = out.replace(/.js$/, '.min.js')
 
+}
 
+config.push({
 
+  input: 'src/vue/index.js',
 
+  output: {
 
+    name: 'BootstrapTable',
 
+    file: out,
 
+    format: 'umd'
 
+  },
 
+  plugins: [
 
+    vue(),
 
+    ...plugins
 
+  ]
 
+})
 
+
 
+out = 'dist/bootstrap-table-vue.esm.js'
 
 if (process.env.NODE_ENV === 'production') {
 
   out = out.replace(/.js$/, '.min.js')
 
 }

+ 7 - 0
site/_data/nav.yml
查看文件 

@@ -47,6 +47,13 @@
 
     - title: Toolbar
 
     - title: Treegrid
 
 
+- title: VueJS
 
+  pages:
 
+    - title: Introduction
 
+    - title: Browser
 
+    - title: Webpack
 
+    - title: Component
 
+
 
 - title: FAQ
 
 
 - title: About

+ 1 - 1
site/docs/getting-started/download.md
查看文件 

@@ -32,7 +32,7 @@ The folks over at [UNPKG](https://unpkg.com/bootstrap-table@{{ site.current_vers
 
 
 ## Package managers
 
 
-### npm
 
+### NPM
 
 
 Install and manage Bootstrap table's CSS, JavaScript, locales, and extensions using [npm](https://www.npmjs.com/package/bootstrap-table).

+ 142 - 0
site/docs/vuejs/browser.md
查看文件 

@@ -0,0 +1,142 @@
 
+---
 
+layout: docs
 
+title: Browser
 
+description: Learn how to use Bootstrap Table Vue Component in your project using browser.
 
+group: vuejs
 
+toc: true
 
+---
 
+
 
+## VueJS JavaScript
 
+
 
+In addition to the files that [Quick start](/docs/getting-started/introduction/#quick-start) mentions, you also need to include our vue component file.
 
+
 
+{% highlight html %}
 
+<script src="https://unpkg.com/bootstrap-table@{{ site.current_version }}/dist/bootstrap-table-vue.min.js"></script>
 
+{% endhighlight %}
 
+
 
+## Usage
 
+
 
+{% highlight html %}
 
+<div id="table">
 
+  <bootstrap-table :columns="columns" :data="data" :options="options"></bootstrap-table>
 
+</div>
 
+
 
+<script>
 
+  new Vue({
 
+    el: '#table',
 
+    components: {
 
+      'BootstrapTable': BootstrapTable
 
+    },
 
+    data: {
 
+      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>
 
+{% endhighlight %}
 
+
 
+## Starter template
 
+
 
+{% highlight html %}
 
+<!doctype html>
 
+<html lang="en">
 
+  <head>
 
+    <!-- Required meta tags -->
 
+    <meta charset="utf-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 
+    <title>Hello, Bootstrap Table!</title>
 
+
 
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
 
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
 
+    <link rel="stylesheet" href="https://unpkg.com/bootstrap-table@{{ site.current_version }}/dist/bootstrap-table.min.css">
 
+  </head>
 
+  <body>
 
+    <div id="table">
 
+      <bootstrap-table :columns="columns" :data="data" :options="options"></bootstrap-table>
 
+    </div>
 
+
 
+    <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
 
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
 
+    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
 
+    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
 
+    <script src="https://unpkg.com/bootstrap-table@{{ site.current_version }}/dist/bootstrap-table.min.js"></script>
 
+    <script src="https://unpkg.com/bootstrap-table@{{ site.current_version }}/dist/bootstrap-table-vue.min.js"></script>
 
+    <script>
 
+      new Vue({
 
+        el: '#table',
 
+        components: {
 
+          'BootstrapTable': BootstrapTable
 
+        },
 
+        data: {
 
+          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>
 
+  </body>
 
+</html>
 
+{% endhighlight %}

+ 65 - 0
site/docs/vuejs/component.md
查看文件 

@@ -0,0 +1,65 @@
 
+---
 
+layout: docs
 
+title: Component
 
+description: The API of Bootstrap Table Vue Component.
 
+group: vuejs
 
+toc: true
 
+---
 
+
 
+## Usage Example
 
+
 
+{% highlight vue %}
 
+<BootstrapTable
 
+  ref="table"
 
+  :columns="columns"
 
+  :data="data"
 
+  :options="options"
 
+  @onPostBody="onPostBody"
 
+/>
 
+{% endhighlight %}
 
+
 
+## Props
 
+
 
+### columns
 
+
 
+- **Type:** `Object`
 
+
 
+- **Detail:**
 
+
 
+  The [column options](/docs/api/column-options/) of Bootstrap Table. This prop is required.
 
+
 
+- **Default:** `undefined`
 
+
 
+### data
 
+
 
+- **Type:** `Array | Object`
 
+
 
+- **Detail:**
 
+
 
+  The data to be loaded.
 
+
 
+- **Default:** `undefined`
 
+
 
+### options
 
+
 
+- **Type:** `Object`
 
+
 
+- **Detail:**
 
+
 
+  The [table options](/docs/api/table-options/) of Bootstrap Table.
 
+
 
+- **Default:** `{}`
 
+
 
+## Events
 
+
 
+The calling method syntax: `@onEvent="onEvent"`.
 
+
 
+All events (without `onAll`) are defined in [Events API](/docs/api/events/).
 
+
 
+## Methods
 
+
 
+The calling method syntax: `this.$refs.table.methodName(parameter)`.
 
+
 
+Example: `this.$refs.table.getOptions()`.
 
+
 
+All methods are defined in [Methods API](/docs/api/methods/).

+ 50 - 0
site/docs/vuejs/introduction.md
查看文件 

@@ -0,0 +1,50 @@
 
+---
 
+layout: docs
 
+title: Introduction
 
+description: An overview of Bootstrap Table Vue Component, how to install and what's includes vue files.
 
+group: vuejs
 
+redirect_from:
 
+  - "/vuejs/"
 
+toc: true
 
+---
 
+
 
+We have a Bootstrap Table Component for [Vue.js 2.0+](https://vuejs.org), and it should be able to work with the full [API](/docs/api/), the full [extensions](/extensions/) and the full [CSS frameworks](/themes/).
 
+
 
+## Installation
 
+
 
+### Dependencies
 
+
 
+* [Vue.js](https://vuejs.org) (2.0+)
 
+* [jQuery](http://jquery.com)
 
+
 
+### NPM
 
+
 
+Install and manage Bootstrap table's CSS, JavaScript, locales, and extensions using [npm](https://www.npmjs.com/package/bootstrap-table).
 
+
 
+{% highlight sh %}
 
+npm install bootstrap-table
 
+{% endhighlight %}
 
+
 
+### UNPKG
 
+
 
+The folks over at [UNPKG](https://unpkg.com/bootstrap-table@{{ site.current_version }}/dist/) graciously provide CDN support for CSS and JavaScript of Bootstrap table. Just use these links.
 
+
 
+{% highlight html %}
 
+https://unpkg.com/bootstrap-table@{{ site.current_version }}
 
+{% endhighlight %}
 
+
 
+## Build Files
 
+
 
+`dist/` folder includes the following vue component files:
 
+
 
+{% highlight plaintext %}
 
+bootstrap-table/
 
+└── dist/
 
+    ├── bootstrap-table-vue.js
 
+    ├── bootstrap-table-vue.min.js
 
+    ├── bootstrap-table-vue.esm.js
 
+    └── bootstrap-table-vue.esm.min.js
 
+{% endhighlight %}
 
+
 
+* **bootstrap-table-vue.js:** UMD builds can be used directly in the browser via a `<script>` tag.
 
+* **bootstrap-table-vue.esm.js** ES module builds are intended for use with modern bundlers like [webpack 2](https://webpack.js.org/) or [rollup](http://rollupjs.org/).

+ 186 - 0
site/docs/vuejs/webpack.md
查看文件 

@@ -0,0 +1,186 @@
 
+---
 
+layout: docs
 
+title: Webpack
 
+description: Learn how to use Bootstrap Table Vue Component in your project using webpack.
 
+group: vuejs
 
+toc: true
 
+---
 
+
 
+## Importing JavaScript
 
+
 
+Import Bootstrap Table’s JavaScript by adding this line to your app’s entry point (usually `index.js` or `app.js`):
 
+
 
+{% highlight js %}
 
+import 'bootstrap-table'
 
+{% endhighlight %}
 
+
 
+Of course, you can also import themes, locales or extensions you need:
 
+
 
+{% highlight js %}
 
+// import theme
 
+import 'bootstrap-table/dist/themes/materialize/bootstrap-table-materialize.js'
 
+
 
+// import locale
 
+import 'bootstrap-table/dist/locale/bootstrap-table-zh-CN.js'
 
+
 
+// import extension and dependencies
 
+import 'tableexport.jquery.plugin'
 
+import 'bootstrap-table/dist/extensions/export/bootstrap-table-export.js'
 
+{% endhighlight %}
 
+
 
+By default, Bootstrap Table is dependent on [jQuery](https://jquery.com/), [Bootstrap](https://getbootstrap.com) and [Popper](https://popper.js.org/), these are defined as peerDependencies, this means that you will have to make sure to add both of them to your `package.json` using `npm install --save jquery bootstrap popper.js`.
 
+
 
+## Importing CSS
 
+
 
+Import Bootstrap Table’s CSS by adding this line to your app’s entry point:
 
+
 
+{% highlight js %}
 
+import 'bootstrap-table/dist/bootstrap-table.min.css'
 
+{% endhighlight %}
 
+
 
+Of course, you can also import themes or extensions you need:
 
+
 
+{% highlight js %}
 
+// 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'
 
+{% endhighlight %}
 
+
 
+## Usage
 
+
 
+{% highlight vue %}
 
+<template>
 
+  <BootstrapTable :columns="columns" :data="data" :options="options"></BootstrapTable>
 
+</template>
 
+
 
+<script>
 
+import BootstrapTable from 'bootstrap-table/dist/bootstrap-table-vue.esm.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>
 
+{% endhighlight %}
 
+
 
+## Starter template
 
+
 
+`plugins/jquery.js`
 
+
 
+{% highlight js %}
 
+import jQuery from 'jquery'
 
+window.jQuery = jQuery
 
+{% endhighlight %}
 
+
 
+`plugins/table.js`
 
+
 
+{% highlight 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'
 
+import BootstrapTable from 'bootstrap-table/dist/bootstrap-table-vue.esm.js'
 
+
 
+Vue.component('BootstrapTable', BootstrapTable)
 
+{% endhighlight %}
 
+
 
+`main.js`
 
+
 
+{% highlight js %}
 
+import './plugins/table.js'
 
+{% endhighlight %}
 
+
 
+`View.vue`
 
+
 
+{% highlight 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>
 
+{% endhighlight %}

+ 1 - 1
src/bootstrap-table.js
查看文件 

@@ -730,7 +730,7 @@ class BootstrapTable {
 
             value = item[key]
 
           }
 
 
-          // Fix #142: respect searchForamtter boolean
 
+          // Fix #142: respect searchFormatter boolean
 
           if (column && column.searchFormatter) {
 
             value = Utils.calculateObjectValue(column,
 
               this.header.formatters[j], [value, item, i, column.field], value)

+ 7 - 5
src/vue/BootstrapTable.vue
查看文件 

@@ -11,19 +11,21 @@ const deepCopy = arg => {
 
 export default {
 
   name: 'BootstrapTable',
 
   props: {
 
-    options: {
 
-      type: Object,
 
-      required: true
 
-    },
 
     columns: {
 
       type: Array,
 
       require: true
 
     },
 
     data: {
 
-      type: Array,
 
+      type: [Array, Object],
 
       default () {
 
         return undefined
 
       }
 
+    },
 
+    options: {
 
+      type: Object,
 
+      default () {
 
+        return {}
 
+      }
 
     }
 
   },
 
   mounted () {