浏览代码

Add vue compoment

zhixin 6 年之前
父节点
当前提交
9700a05669
共有 3 个文件被更改,包括 87 次插入0 次删除
  1. 1 0
      src/bootstrap-table.js
  2. 83 0
      src/vue/BootstrapTable.vue
  3. 3 0
      src/vue/index.js

+ 1 - 0
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

+ 83 - 0
src/vue/BootstrapTable.vue

@@ -0,0 +1,83 @@
+<template>
+  <table id="table"/>
+</template>
+
+<script>
+import $ from 'jquery'
+
+const deepCopy = arg => {
+  return $.extend(true, Array.isArray(arg) ? [] : {}, arg)
+}
+
+export default {
+  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>

+ 3 - 0
src/vue/index.js

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