Merge pull request #4299 from wenzhixin/feature/vue

Feature/vue

package.json

@@ -22,7 +22,9 @@
     "rollup-plugin-inject": "^2.2.0",
     "rollup-plugin-multi-entry": "^2.1.0",
     "rollup-plugin-node-resolve": "^4.0.1",
-    "sass": "^1.16.1"
+    "rollup-plugin-vue": "^5.0.0",
+    "sass": "^1.16.1",
+    "vue-template-compiler": "^2.6.10"
   },
   "scripts": {
     "lint": "eslint src",

rollup.config.js

@@ -5,9 +5,15 @@ import commonjs from 'rollup-plugin-commonjs'
 import minify from 'rollup-plugin-babel-minify'
 import inject from 'rollup-plugin-inject'
 import multiEntry from 'rollup-plugin-multi-entry'
+import vue from 'rollup-plugin-vue'
 
 const files = glob.sync('src/**/*.js', {
-  ignore: ['src/constants/**', 'src/utils/**', 'src/virtual-scroll/**']
+  ignore: [
+    'src/constants/**',
+    'src/utils/**',
+    'src/virtual-scroll/**',
+    'src/vue/**'
+  ]
 })
 const external = ['jquery']
 const globals = {
@@ -70,4 +76,21 @@ config.push({
   ]
 })
 
+out = 'dist/vue.js'
+if (process.env.NODE_ENV === 'production') {
+  out = out.replace(/.js$/, '.min.js')
+}
+config.push({
+  input: 'src/vue/BootstrapTable.vue',
+  output: {
+    name: 'BootstrapTable',
+    file: out,
+    format: 'esm'
+  },
+  plugins: [
+    vue(),
+    ...plugins
+  ]
+})
+
 export default config

src/bootstrap-table.js

@@ -2783,6 +2783,7 @@ $.fn.bootstrapTable.Constructor = BootstrapTable
 $.fn.bootstrapTable.theme = Constants.THEME
 $.fn.bootstrapTable.defaults = BootstrapTable.DEFAULTS
 $.fn.bootstrapTable.columnDefaults = BootstrapTable.COLUMN_DEFAULTS
+$.fn.bootstrapTable.events = BootstrapTable.EVENTS
 $.fn.bootstrapTable.locales = BootstrapTable.LOCALES
 $.fn.bootstrapTable.methods = allowedMethods
 $.fn.bootstrapTable.utils = Utils

src/vue/BootstrapTable.vue

@@ -0,0 +1,83 @@
+<template>
+  <table id="table"/>
+</template>
+
+<script>
+const $ = window.jQuery
+const deepCopy = arg => {
+  return $.extend(true, Array.isArray(arg) ? [] : {}, arg)
+}
+
+export default {
+  name: 'BootstrapTable',
+  props: {
+    options: {
+      type: Object,
+      required: true
+    },
+    columns: {
+      type: Array,
+      require: true
+    },
+    data: {
+      type: Array,
+      default () {
+        return undefined
+      }
+    }
+  },
+  mounted () {
+    this.$table = $(this.$el)
+
+    this.$table.on('all.bs.table', (e, name, args) => {
+      this.$emit($.fn.bootstrapTable.events[name], ...args)
+    })
+
+    this._initTable()
+  },
+  methods: {
+    _initTable () {
+      const options = {
+        ...deepCopy(this.options),
+        columns: deepCopy(this.columns),
+        data: deepCopy(this.data)
+      }
+      if (!this._hasInit) {
+        this.$table.bootstrapTable(options)
+        this._hasInit = true
+      } else {
+        this.refreshOptions(options)
+      }
+    },
+    ...(() => {
+      const res = {}
+      for (const method of $.fn.bootstrapTable.methods) {
+        res[method] = function (...args) {
+          return this.$table.bootstrapTable(method, ...args)
+        }
+      }
+      return res
+    })()
+  },
+  watch: {
+    options: {
+      handler () {
+        this._initTable()
+      },
+      deep: true
+    },
+    columns: {
+      handler () {
+        this._initTable()
+      },
+      deep: true
+    },
+    data: {
+      handler () {
+        this.load(deepCopy(this.data))
+      },
+      deep: true
+    }
+  }
+}
+</script>

src/vue/index.js

@@ -0,0 +1,3 @@
+import BootstrapTable from './BootstrapTable.vue'
+
+export default BootstrapTable