vxe-table 3.8.24 → 3.9.0-rc.0

package/lib/toolbar/src/toolbar.js

@@ -4,271 +4,27 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+var _comp = require("../../ui/src/comp");
 var _xeUtils = _interopRequireDefault(require("xe-utils"));
-var _conf = _interopRequireDefault(require("../../v-x-e-table/src/conf"));
-var _vXETable = _interopRequireDefault(require("../../v-x-e-table"));
-var _size = _interopRequireDefault(require("../../mixins/size"));
-var _vn = require("../../tools/vn");
-var _log = require("../../tools/log");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _ui = require("../../ui");
+var _vn = require("../../ui/src/vn");
+var _log = require("../../ui/src/log");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
-function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
 function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
-var renderDropdowns = function renderDropdowns(h, _vm, item, isBtn) {
-  var _e = _vm._e;
-  var dropdowns = item.dropdowns;
-  if (dropdowns) {
-    return dropdowns.map(function (child) {
-      return child.visible === false ? _e() : h('vxe-button', {
-        on: {
-          click: function click(evnt) {
-            return isBtn ? _vm.btnEvent(evnt, child) : _vm.tolEvent(evnt, child);
-          }
-        },
-        props: {
-          disabled: child.disabled,
-          loading: child.loading,
-          type: child.type,
-          mode: child.mode,
-          icon: child.icon,
-          circle: child.circle,
-          round: child.round,
-          status: child.status,
-          content: child.name
-        }
-      });
-    });
-  }
-  return [];
-};
-
-/**
- * 渲染按钮
- */
-function renderBtns(h, _vm) {
-  var _e = _vm._e,
-    $scopedSlots = _vm.$scopedSlots,
-    $xegrid = _vm.$xegrid,
-    $xetable = _vm.$xetable,
-    _vm$buttons = _vm.buttons,
-    buttons = _vm$buttons === void 0 ? [] : _vm$buttons;
-  var buttonsSlot = $scopedSlots.buttons;
-  if (buttonsSlot) {
-    return buttonsSlot.call(_vm, {
-      $grid: $xegrid,
-      $table: $xetable
-    }, h);
-  }
-  return buttons.map(function (item) {
-    var dropdowns = item.dropdowns,
-      buttonRender = item.buttonRender;
-    var compConf = buttonRender ? _vXETable.default.renderer.get(buttonRender.name) : null;
-    if (item.visible === false) {
-      return _e();
-    }
-    if (compConf) {
-      var renderToolbarButton = compConf.renderToolbarButton || compConf.renderButton;
-      var toolbarButtonClassName = compConf.toolbarButtonClassName;
-      var params = {
-        $grid: $xegrid,
-        $table: $xetable,
-        button: item
-      };
-      if (renderToolbarButton) {
-        return h('span', {
-          class: ['vxe-button--item', toolbarButtonClassName ? _xeUtils.default.isFunction(toolbarButtonClassName) ? toolbarButtonClassName(params) : toolbarButtonClassName : '']
-        }, (0, _vn.getSlotVNs)(renderToolbarButton.call(_vm, h, buttonRender, params)));
-      }
-    }
-    return h('vxe-button', {
-      on: {
-        click: function click(evnt) {
-          return _vm.btnEvent(evnt, item);
-        }
-      },
-      props: {
-        disabled: item.disabled,
-        loading: item.loading,
-        type: item.type,
-        mode: item.mode,
-        icon: item.icon,
-        circle: item.circle,
-        round: item.round,
-        status: item.status,
-        content: item.name,
-        destroyOnClose: item.destroyOnClose,
-        placement: item.placement,
-        transfer: item.transfer
-      },
-      scopedSlots: dropdowns && dropdowns.length ? {
-        dropdowns: function dropdowns() {
-          return renderDropdowns(h, _vm, item, true);
-        }
-      } : null
-    });
-  });
-}
-
-/**
- * 渲染右侧工具
- */
-function renderRightTools(h, _vm) {
-  var _e = _vm._e,
-    $scopedSlots = _vm.$scopedSlots,
-    $xetable = _vm.$xetable,
-    $xegrid = _vm.$xegrid,
-    _vm$tools = _vm.tools,
-    tools = _vm$tools === void 0 ? [] : _vm$tools;
-  var toolsSlot = $scopedSlots.tools;
-  if (toolsSlot) {
-    return toolsSlot.call(_vm, {
-      $table: $xetable,
-      $grid: $xegrid
-    }, h);
-  }
-  return tools.map(function (item) {
-    var dropdowns = item.dropdowns,
-      toolRender = item.toolRender;
-    var compConf = toolRender ? _vXETable.default.renderer.get(toolRender.name) : null;
-    if (item.visible === false) {
-      return _e();
-    }
-    if (compConf) {
-      var renderToolbarTool = compConf.renderToolbarTool;
-      if (renderToolbarTool) {
-        var toolbarToolClassName = compConf.toolbarToolClassName;
-        var params = {
-          $table: $xetable,
-          $grid: $xegrid,
-          tool: item
-        };
-        return h('span', {
-          class: ['vxe-tool--item', toolbarToolClassName ? _xeUtils.default.isFunction(toolbarToolClassName) ? toolbarToolClassName(params) : toolbarToolClassName : '']
-        }, (0, _vn.getSlotVNs)(renderToolbarTool.call(_vm, h, toolRender, params)));
-      }
-    }
-    return h('vxe-button', {
-      on: {
-        click: function click(evnt) {
-          return _vm.tolEvent(evnt, item);
-        }
-      },
-      props: {
-        disabled: item.disabled,
-        loading: item.loading,
-        type: item.type,
-        mode: item.mode,
-        icon: item.icon,
-        circle: item.circle,
-        round: item.round,
-        status: item.status,
-        content: item.name,
-        destroyOnClose: item.destroyOnClose,
-        placement: item.placement,
-        transfer: item.transfer
-      },
-      scopedSlots: dropdowns && dropdowns.length ? {
-        dropdowns: function dropdowns() {
-          return renderDropdowns(h, _vm, item, false);
-        }
-      } : null
-    });
-  });
-}
-function renderToolImport(h, _vm) {
-  var importOpts = _vm.importOpts;
-  return h('vxe-button', {
-    props: {
-      circle: true,
-      title: _conf.default.i18n('vxe.toolbar.import'),
-      icon: importOpts.icon || _conf.default.icon.TOOLBAR_TOOLS_IMPORT
-    },
-    on: {
-      click: _vm.importEvent
-    }
-  });
-}
-function renderToolExport(h, _vm) {
-  var exportOpts = _vm.exportOpts;
-  return h('vxe-button', {
-    props: {
-      circle: true,
-      title: _conf.default.i18n('vxe.toolbar.export'),
-      icon: exportOpts.icon || _conf.default.icon.TOOLBAR_TOOLS_EXPORT
-    },
-    on: {
-      click: _vm.exportEvent
-    }
-  });
-}
-function renderToolPrint(h, _vm) {
-  var printOpts = _vm.printOpts;
-  return h('vxe-button', {
-    props: {
-      circle: true,
-      title: _conf.default.i18n('vxe.toolbar.print'),
-      icon: printOpts.icon || _conf.default.icon.TOOLBAR_TOOLS_PRINT
-    },
-    on: {
-      click: _vm.printEvent
-    }
-  });
-}
-function renderToolRefresh(h, _vm) {
-  var refreshOpts = _vm.refreshOpts,
-    isRefresh = _vm.isRefresh;
-  return h('vxe-button', {
-    props: {
-      circle: true,
-      title: _conf.default.i18n('vxe.toolbar.refresh'),
-      icon: isRefresh ? refreshOpts.iconLoading || _conf.default.icon.TOOLBAR_TOOLS_REFRESH_LOADING : refreshOpts.icon || _conf.default.icon.TOOLBAR_TOOLS_REFRESH
-    },
-    on: {
-      click: _vm.refreshEvent
-    }
-  });
-}
-function renderToolZoom(h, _vm) {
-  var _e = _vm._e,
-    $xegrid = _vm.$xegrid,
-    zoomOpts = _vm.zoomOpts;
-  return $xegrid ? h('vxe-button', {
-    props: {
-      circle: true,
-      title: _conf.default.i18n("vxe.toolbar.zoom".concat($xegrid.isMaximized() ? 'Out' : 'In')),
-      icon: $xegrid.isMaximized() ? zoomOpts.iconOut || _conf.default.icon.TOOLBAR_TOOLS_MINIMIZE : zoomOpts.iconIn || _conf.default.icon.TOOLBAR_TOOLS_FULLSCREEN
-    },
-    on: {
-      click: $xegrid.triggerZoomEvent
-    }
-  }) : _e();
-}
-function renderToolCustom(h, _vm) {
-  var customOpts = _vm.customOpts;
-  var customBtnOns = {};
-  if (customOpts.trigger === 'manual') {
-    // 手动触发
-  } else if (customOpts.trigger === 'hover') {
-    // hover 触发
-    customBtnOns.mouseenter = _vm.handleMouseenterSettingEvent;
-    customBtnOns.mouseleave = _vm.handleMouseleaveSettingEvent;
-  } else {
-    // 点击触发
-    customBtnOns.click = _vm.handleClickSettingEvent;
-  }
-  return h('vxe-button', {
-    props: {
-      circle: true,
-      title: _conf.default.i18n('vxe.toolbar.custom'),
-      icon: customOpts.icon || _conf.default.icon.TOOLBAR_TOOLS_CUSTOM
-    },
-    on: customBtnOns
-  });
-}
-var _default2 = exports.default = {
+var getConfig = _ui.VxeUI.getConfig,
+  getIcon = _ui.VxeUI.getIcon,
+  getI18n = _ui.VxeUI.getI18n,
+  renderer = _ui.VxeUI.renderer,
+  commands = _ui.VxeUI.commands,
+  createEvent = _ui.VxeUI.createEvent,
+  globalMixins = _ui.VxeUI.globalMixins,
+  renderEmptyElement = _ui.VxeUI.renderEmptyElement;
+var _default2 = exports.default = (0, _comp.defineVxeComponent)({
   name: 'VxeToolbar',
-  mixins: [_size.default],
+  mixins: [globalMixins.sizeMixin],
   props: {
     loading: Boolean,
     refresh: [Boolean, Object],
@@ -280,133 +36,111 @@ var _default2 = exports.default = {
     buttons: {
       type: Array,
       default: function _default() {
-        return _conf.default.toolbar.buttons;
+        return getConfig().toolbar.buttons;
       }
     },
     tools: {
       type: Array,
       default: function _default() {
-        return _conf.default.toolbar.tools;
+        return getConfig().toolbar.tools;
       }
     },
     perfect: {
       type: Boolean,
       default: function _default() {
-        return _conf.default.toolbar.perfect;
+        return getConfig().toolbar.perfect;
       }
     },
     size: {
       type: String,
       default: function _default() {
-        return _conf.default.toolbar.size || _conf.default.size;
+        return getConfig().toolbar.size || getConfig().size;
       }
     },
     className: [String, Function]
   },
   inject: {
-    $xegrid: {
+    $xeGrid: {
       default: null
     }
   },
   data: function data() {
-    return {
-      $xetable: null,
+    var xID = _xeUtils.default.uniqueId();
+    var reactData = {
       isRefresh: false,
-      columns: [],
-      customStore: {
-        isAll: false,
-        isIndeterminate: false,
-        visible: false
-      }
+      connectFlag: 0,
+      columns: []
+    };
+    var internalData = {
+      connectTable: null
+    };
+    return {
+      xID: xID,
+      reactData: reactData,
+      internalData: internalData
     };
   },
-  computed: {
-    refreshOpts: function refreshOpts() {
-      return Object.assign({}, _conf.default.toolbar.refresh, this.refresh);
+  computed: Object.assign(Object.assign({}, {}), {
+    computeRefreshOpts: function computeRefreshOpts() {
+      var $xeToolbar = this;
+      var props = $xeToolbar;
+      return Object.assign({}, getConfig().toolbar.refresh, props.refresh);
     },
-    importOpts: function importOpts() {
-      return Object.assign({}, _conf.default.toolbar.import, this.import);
+    computeImportOpts: function computeImportOpts() {
+      var $xeToolbar = this;
+      var props = $xeToolbar;
+      return Object.assign({}, getConfig().toolbar.import, props.import);
     },
-    exportOpts: function exportOpts() {
-      return Object.assign({}, _conf.default.toolbar.export, this.export);
+    computeExportOpts: function computeExportOpts() {
+      var $xeToolbar = this;
+      var props = $xeToolbar;
+      return Object.assign({}, getConfig().toolbar.export, props.export);
     },
-    printOpts: function printOpts() {
-      return Object.assign({}, _conf.default.toolbar.print, this.print);
+    computePrintOpts: function computePrintOpts() {
+      var $xeToolbar = this;
+      var props = $xeToolbar;
+      return Object.assign({}, getConfig().toolbar.print, props.print);
     },
-    zoomOpts: function zoomOpts() {
-      return Object.assign({}, _conf.default.toolbar.zoom, this.zoom);
+    computeZoomOpts: function computeZoomOpts() {
+      var $xeToolbar = this;
+      var props = $xeToolbar;
+      return Object.assign({}, getConfig().toolbar.zoom, props.zoom);
     },
-    customOpts: function customOpts() {
-      return Object.assign({}, _conf.default.toolbar.custom, this.custom);
-    }
-  },
-  created: function created() {
-    var _this = this;
-    var refresh = this.refresh,
-      refreshOpts = this.refreshOpts,
-      customOpts = this.customOpts;
-    this.$nextTick(function () {
-      var $xetable = _this.fintTable();
-      var queryMethod = refreshOpts.queryMethod || refreshOpts.query;
-      if (refresh && !_this.$xegrid && !queryMethod) {
-        (0, _log.warnLog)('vxe.error.notFunc', ['queryMethod']);
-      }
-      if ($xetable) {
-        $xetable.connect(_this);
-      }
-      if (process.env.NODE_ENV === 'development') {
-        if (customOpts.isFooter) {
-          (0, _log.warnLog)('vxe.error.delProp', ['toolbar.custom.isFooter', 'table.custom-config.showFooter']);
-        }
-        if (customOpts.showFooter) {
-          (0, _log.warnLog)('vxe.error.delProp', ['toolbar.custom.showFooter', 'table.custom-config.showFooter']);
-        }
-        if (customOpts.immediate) {
-          (0, _log.warnLog)('vxe.error.delProp', ['toolbar.custom.immediate', 'table.custom-config.immediate']);
-        }
-        if (customOpts.trigger) {
-          (0, _log.warnLog)('vxe.error.delProp', ['toolbar.custom.trigger', 'table.custom-config.trigger']);
-        }
-        if (_this.buttons) {
-          _this.buttons.forEach(function (item) {
-            var buttonRender = item.buttonRender;
-            var compConf = buttonRender ? _vXETable.default.renderer.get(buttonRender.name) : null;
-            if (compConf && compConf.renderButton) {
-              (0, _log.warnLog)('vxe.error.delFunc', ['renderButton', 'renderToolbarButton']);
-            }
-          });
+    computeCustomOpts: function computeCustomOpts() {
+      var $xeToolbar = this;
+      var props = $xeToolbar;
+      return Object.assign({}, getConfig().toolbar.custom, props.custom);
+    },
+    computeTableCustomOpts: function computeTableCustomOpts() {
+      var $xeToolbar = this;
+      var reactData = $xeToolbar.reactData;
+      var internalData = $xeToolbar.internalData;
+      var connectTable = internalData.connectTable;
+      var $table = connectTable;
+      if (reactData.connectFlag || $table) {
+        if ($table) {
+          return $table.computeCustomOpts;
         }
       }
-    });
-  },
-  render: function render(h) {
-    var _e = this._e,
-      $xegrid = this.$xegrid,
-      perfect = this.perfect,
-      loading = this.loading,
-      refresh = this.refresh,
-      zoom = this.zoom,
-      custom = this.custom,
-      vSize = this.vSize,
-      className = this.className;
-    return h('div', {
-      class: ['vxe-toolbar', className ? _xeUtils.default.isFunction(className) ? className({
-        $toolbar: this
-      }) : className : '', _defineProperty(_defineProperty(_defineProperty({}, "size--".concat(vSize), vSize), 'is--perfect', perfect), 'is--loading', loading)]
-    }, [h('div', {
-      class: 'vxe-buttons--wrapper'
-    }, renderBtns(h, this)), h('div', {
-      class: 'vxe-tools--wrapper'
-    }, renderRightTools(h, this)), h('div', {
-      class: 'vxe-tools--operate'
-    }, [this.import ? renderToolImport(h, this) : _e(), this.export ? renderToolExport(h, this) : _e(), this.print ? renderToolPrint(h, this) : _e(), refresh ? renderToolRefresh(h, this) : _e(), zoom && $xegrid ? renderToolZoom(h, this) : _e(), custom ? renderToolCustom(h, this) : _e()])]);
-  },
+      return {
+        trigger: ''
+      };
+    },
+    computeTrigger: function computeTrigger() {
+      var $xeToolbar = this;
+      var tableCustomOpts = $xeToolbar.computeTableCustomOpts;
+      return tableCustomOpts.trigger;
+    }
+  }),
   methods: {
-    syncUpdate: function syncUpdate(params) {
-      var collectColumn = params.collectColumn,
-        $table = params.$table;
-      this.$xetable = $table;
-      this.columns = collectColumn;
+    //
+    // Method
+    //
+    dispatchEvent: function dispatchEvent(type, params, evnt) {
+      var $xeToolbar = this;
+      $xeToolbar.$emit(type, createEvent(evnt, {
+        $toolbar: $xeToolbar
+      }, params));
     },
     fintTable: function fintTable() {
       var $children = this.$parent.$children;
@@ -415,143 +149,575 @@ var _default2 = exports.default = {
         return comp && comp.loadData && index > selfIndex && comp.$vnode.componentOptions.tag === 'vxe-table';
       });
     },
+    syncUpdate: function syncUpdate(params) {
+      var $xeToolbar = this;
+      var reactData = $xeToolbar.reactData;
+      var internalData = $xeToolbar.internalData;
+      internalData.connectTable = params.$table;
+      reactData.columns = params.collectColumn;
+      reactData.connectFlag++;
+    },
     checkTable: function checkTable() {
-      if (this.$xetable) {
+      var $xeToolbar = this;
+      var internalData = $xeToolbar.internalData;
+      var connectTable = internalData.connectTable;
+      var $table = connectTable;
+      if ($table) {
         return true;
       }
       (0, _log.errLog)('vxe.error.barUnableLink');
     },
-    handleClickSettingEvent: function handleClickSettingEvent(_ref2) {
+    handleClickSettingEvent: function handleClickSettingEvent(_ref) {
+      var $event = _ref.$event;
+      var $xeToolbar = this;
+      var internalData = $xeToolbar.internalData;
+      var connectTable = internalData.connectTable;
+      var $table = connectTable;
+      if ($table) {
+        if ($table.triggerCustomEvent) {
+          $table.triggerCustomEvent($event);
+        } else {
+          (0, _log.errLog)('vxe.error.reqModule', ['VxeTableCustomModule']);
+        }
+      }
+    },
+    handleMouseenterSettingEvent: function handleMouseenterSettingEvent(_ref2) {
       var $event = _ref2.$event;
-      var $xetable = this.$xetable;
-      if ($xetable) {
-        $xetable.triggerCustomEvent($event);
+      var $xeToolbar = this;
+      var internalData = $xeToolbar.internalData;
+      var connectTable = internalData.connectTable;
+      var $table = connectTable;
+      if ($table) {
+        $table.customOpenEvent($event);
       } else {
         (0, _log.errLog)('vxe.error.reqModule', ['VxeTableCustomModule']);
       }
     },
-    handleMouseenterSettingEvent: function handleMouseenterSettingEvent(_ref3) {
+    handleMouseleaveSettingEvent: function handleMouseleaveSettingEvent(_ref3) {
       var $event = _ref3.$event;
-      var $xetable = this.$xetable;
-      if ($xetable) {
-        $xetable.customOpenEvent($event);
-      } else {
-        (0, _log.errLog)('vxe.error.reqModule', ['VxeTableCustomModule']);
+      var $xeToolbar = this;
+      var internalData = $xeToolbar.internalData;
+      var connectTable = internalData.connectTable;
+      var $table = connectTable;
+      if ($table) {
+        var customStore = $table.reactData.customStore;
+        customStore.activeBtn = false;
+        setTimeout(function () {
+          if (!customStore.activeBtn && !customStore.activeWrapper) {
+            $table.customCloseEvent($event);
+          }
+        }, 350);
       }
     },
-    handleMouseleaveSettingEvent: function handleMouseleaveSettingEvent(_ref4) {
+    refreshEvent: function refreshEvent(_ref4) {
       var $event = _ref4.$event;
-      var $xetable = this.$xetable,
-        customStore = this.customStore;
-      customStore.activeBtn = false;
-      setTimeout(function () {
-        if (!customStore.activeBtn && !customStore.activeWrapper) {
-          $xetable.customColseEvent($event);
-        }
-      }, 350);
-    },
-    refreshEvent: function refreshEvent(evnt) {
-      var _this2 = this;
-      var $xegrid = this.$xegrid,
-        refreshOpts = this.refreshOpts,
-        isRefresh = this.isRefresh;
+      var $xeToolbar = this;
+      var reactData = $xeToolbar.reactData;
+      var $xeGrid = $xeToolbar.$xeGrid;
+      var isRefresh = reactData.isRefresh;
+      var refreshOpts = $xeToolbar.computeRefreshOpts;
       if (!isRefresh) {
         var queryMethod = refreshOpts.queryMethod || refreshOpts.query;
         if (queryMethod) {
-          this.isRefresh = true;
+          reactData.isRefresh = true;
           try {
             Promise.resolve(queryMethod({})).catch(function (e) {
               return e;
             }).then(function () {
-              _this2.isRefresh = false;
+              reactData.isRefresh = false;
             });
           } catch (e) {
-            this.isRefresh = false;
+            reactData.isRefresh = false;
           }
-        } else if ($xegrid) {
-          this.isRefresh = true;
-          $xegrid.triggerToolbarCommitEvent({
+        } else if ($xeGrid) {
+          reactData.isRefresh = true;
+          $xeGrid.triggerToolbarCommitEvent({
             code: refreshOpts.code || 'reload'
-          }, evnt).catch(function (e) {
+          }, $event).catch(function (e) {
             return e;
           }).then(function () {
-            _this2.isRefresh = false;
+            reactData.isRefresh = false;
           });
         }
       }
     },
+    zoomEvent: function zoomEvent(_ref5) {
+      var $event = _ref5.$event;
+      var $xeToolbar = this;
+      var $xeGrid = $xeToolbar.$xeGrid;
+      if ($xeGrid) {
+        $xeGrid.triggerZoomEvent($event);
+      }
+    },
     btnEvent: function btnEvent(evnt, item) {
-      var $xegrid = this.$xegrid,
-        $xetable = this.$xetable;
+      var $xeToolbar = this;
+      var internalData = $xeToolbar.internalData;
+      var $xeGrid = $xeToolbar.$xeGrid;
+      var connectTable = internalData.connectTable;
+      var $table = connectTable;
       var code = item.code;
       if (code) {
-        if ($xegrid) {
-          $xegrid.triggerToolbarBtnEvent(item, evnt);
+        if ($xeGrid) {
+          $xeGrid.triggerToolbarBtnEvent(item, evnt);
         } else {
-          var gCommandOpts = _vXETable.default.commands.get(code);
+          var gCommandOpts = commands.get(code);
           var params = {
             code: code,
             button: item,
-            $table: $xetable,
-            $grid: $xegrid,
+            $table: $table,
+            $grid: $xeGrid,
             $event: evnt
           };
           if (gCommandOpts) {
-            if (gCommandOpts.commandMethod) {
-              gCommandOpts.commandMethod(params);
+            var tCommandMethod = gCommandOpts.tableCommandMethod || gCommandOpts.commandMethod;
+            if (tCommandMethod) {
+              tCommandMethod(params);
             } else {
               if (process.env.NODE_ENV === 'development') {
                 (0, _log.errLog)('vxe.error.notCommands', [code]);
               }
             }
           }
-          this.$emit('button-click', params);
+          $xeToolbar.dispatchEvent('button-click', params, evnt);
         }
       }
     },
     tolEvent: function tolEvent(evnt, item) {
-      var $xegrid = this.$xegrid,
-        $xetable = this.$xetable;
+      var $xeToolbar = this;
+      var internalData = $xeToolbar.internalData;
+      var $xeGrid = $xeToolbar.$xeGrid;
+      var connectTable = internalData.connectTable;
+      var $table = connectTable;
       var code = item.code;
       if (code) {
-        if ($xegrid) {
-          $xegrid.triggerToolbarTolEvent(item, evnt);
+        if ($xeGrid) {
+          $xeGrid.triggerToolbarTolEvent(item, evnt);
         } else {
-          var gCommandOpts = _vXETable.default.commands.get(code);
+          var gCommandOpts = commands.get(code);
           var params = {
             code: code,
             tool: item,
-            $xegrid: $xegrid,
-            $table: $xetable,
+            $table: $table,
+            $grid: $xeGrid,
             $event: evnt
           };
           if (gCommandOpts) {
-            if (gCommandOpts.commandMethod) {
-              gCommandOpts.commandMethod(params);
+            var tCommandMethod = gCommandOpts.tableCommandMethod || gCommandOpts.commandMethod;
+            if (tCommandMethod) {
+              tCommandMethod(params);
             } else {
               if (process.env.NODE_ENV === 'development') {
                 (0, _log.errLog)('vxe.error.notCommands', [code]);
               }
             }
           }
-          this.$emit('tool-click', params);
+          $xeToolbar.dispatchEvent('tool-click', params, evnt);
         }
       }
     },
     importEvent: function importEvent() {
-      if (this.checkTable()) {
-        this.$xetable.openImport(this.importOpts);
+      var $xeToolbar = this;
+      var internalData = $xeToolbar.internalData;
+      if ($xeToolbar.checkTable()) {
+        var connectTable = internalData.connectTable;
+        var $table = connectTable;
+        if ($table) {
+          $table.openImport();
+        }
       }
     },
     exportEvent: function exportEvent() {
-      if (this.checkTable()) {
-        this.$xetable.openExport(this.exportOpts);
+      var $xeToolbar = this;
+      var internalData = $xeToolbar.internalData;
+      if ($xeToolbar.checkTable()) {
+        var connectTable = internalData.connectTable;
+        var $table = connectTable;
+        if ($table) {
+          $table.openExport();
+        }
       }
     },
     printEvent: function printEvent() {
-      if (this.checkTable()) {
-        this.$xetable.openPrint(this.printOpts);
+      var $xeToolbar = this;
+      var internalData = $xeToolbar.internalData;
+      if ($xeToolbar.checkTable()) {
+        var connectTable = internalData.connectTable;
+        var $table = connectTable;
+        if ($table) {
+          $table.openPrint();
+        }
+      }
+    },
+    //
+    // Render
+    //
+    renderDropdowns: function renderDropdowns(h, item, isBtn) {
+      // 使用已安装的组件，如果未安装则不渲染
+      var VxeUIButtonComponent = _ui.VxeUI.getComponent('VxeButton');
+      var $xeToolbar = this;
+      var dropdowns = item.dropdowns;
+      var downVNs = [];
+      if (dropdowns) {
+        return dropdowns.map(function (child, index) {
+          if (child.visible === false) {
+            return renderEmptyElement($xeToolbar);
+          }
+          return VxeUIButtonComponent ? h(VxeUIButtonComponent, {
+            key: index,
+            props: {
+              disabled: child.disabled,
+              loading: child.loading,
+              type: child.type,
+              mode: child.mode,
+              icon: child.icon,
+              circle: child.circle,
+              round: child.round,
+              status: child.status,
+              content: child.name
+            },
+            on: {
+              click: function click(_ref6) {
+                var $event = _ref6.$event;
+                return isBtn ? $xeToolbar.btnEvent($event, child) : $xeToolbar.tolEvent($event, child);
+              }
+            }
+          }) : renderEmptyElement($xeToolbar);
+        });
+      }
+      return downVNs;
+    },
+    /**
+     * 渲染按钮
+     */
+    renderBtns: function renderBtns(h) {
+      var _this = this;
+      // 使用已安装的组件，如果未安装则不渲染
+      var VxeUIButtonComponent = _ui.VxeUI.getComponent('VxeButton');
+      var $xeToolbar = this;
+      var props = $xeToolbar;
+      var internalData = $xeToolbar.internalData;
+      var $xeGrid = $xeToolbar.$xeGrid;
+      var buttons = props.buttons;
+      var connectTable = internalData.connectTable;
+      var $table = connectTable;
+      var btnVNs = [];
+      if (buttons) {
+        buttons.forEach(function (item) {
+          var dropdowns = item.dropdowns,
+            buttonRender = item.buttonRender;
+          if (item.visible !== false) {
+            var compConf = buttonRender ? renderer.get(buttonRender.name) : null;
+            if (buttonRender && compConf && compConf.renderToolbarButton) {
+              var toolbarButtonClassName = compConf.toolbarButtonClassName;
+              var params = {
+                $grid: $xeGrid,
+                $table: $table,
+                button: item
+              };
+              btnVNs.push(h('span', {
+                class: ['vxe-button--item', toolbarButtonClassName ? _xeUtils.default.isFunction(toolbarButtonClassName) ? toolbarButtonClassName(params) : toolbarButtonClassName : '']
+              }, (0, _vn.getSlotVNs)(compConf.renderToolbarButton(h, buttonRender, params))));
+            } else {
+              if (VxeUIButtonComponent) {
+                btnVNs.push(h(VxeUIButtonComponent, {
+                  props: {
+                    disabled: item.disabled,
+                    loading: item.loading,
+                    type: item.type,
+                    mode: item.mode,
+                    icon: item.icon,
+                    circle: item.circle,
+                    round: item.round,
+                    status: item.status,
+                    content: item.name,
+                    permissionCode: item.permissionCode,
+                    destroyOnClose: item.destroyOnClose,
+                    placement: item.placement,
+                    transfer: item.transfer
+                  },
+                  on: {
+                    click: function click(_ref7) {
+                      var $event = _ref7.$event;
+                      return _this.btnEvent($event, item);
+                    }
+                  },
+                  scopedSlots: dropdowns && dropdowns.length ? {
+                    dropdowns: function dropdowns() {
+                      return _this.renderDropdowns(h, item, true);
+                    }
+                  } : {}
+                }));
+              }
+            }
+          }
+        });
+      }
+      return btnVNs;
+    },
+    /**
+     * 渲染右侧工具
+     */
+    renderRightTools: function renderRightTools(h) {
+      // 使用已安装的组件，如果未安装则不渲染
+      var VxeUIButtonComponent = _ui.VxeUI.getComponent('VxeButton');
+      var $xeToolbar = this;
+      var props = $xeToolbar;
+      var internalData = $xeToolbar.internalData;
+      var $xeGrid = $xeToolbar.$xeGrid;
+      var tools = props.tools;
+      var connectTable = internalData.connectTable;
+      var $table = connectTable;
+      var btnVNs = [];
+      if (tools) {
+        tools.forEach(function (item, tIndex) {
+          var dropdowns = item.dropdowns,
+            toolRender = item.toolRender;
+          if (item.visible !== false) {
+            var rdName = toolRender ? toolRender.name : null;
+            var compConf = toolRender ? renderer.get(rdName) : null;
+            if (toolRender && compConf && compConf.renderToolbarTool) {
+              var toolbarToolClassName = compConf.toolbarToolClassName;
+              var params = {
+                $grid: $xeGrid,
+                $table: $table,
+                tool: item
+              };
+              btnVNs.push(h('span', {
+                key: rdName,
+                class: ['vxe-tool--item', toolbarToolClassName ? _xeUtils.default.isFunction(toolbarToolClassName) ? toolbarToolClassName(params) : toolbarToolClassName : '']
+              }, (0, _vn.getSlotVNs)(compConf.renderToolbarTool(h, toolRender, params))));
+            } else {
+              if (VxeUIButtonComponent) {
+                btnVNs.push(h(VxeUIButtonComponent, {
+                  key: tIndex,
+                  props: {
+                    disabled: item.disabled,
+                    loading: item.loading,
+                    type: item.type,
+                    mode: item.mode,
+                    icon: item.icon,
+                    circle: item.circle,
+                    round: item.round,
+                    status: item.status,
+                    content: item.name,
+                    destroyOnClose: item.destroyOnClose,
+                    placement: item.placement,
+                    transfer: item.transfer
+                  },
+                  on: {
+                    click: function click(_ref8) {
+                      var $event = _ref8.$event;
+                      return $xeToolbar.tolEvent($event, item);
+                    }
+                  },
+                  scopedSlots: dropdowns && dropdowns.length ? {
+                    dropdowns: function dropdowns() {
+                      return $xeToolbar.renderDropdowns(h, item, false);
+                    }
+                  } : {}
+                }));
+              }
+            }
+          }
+        });
+      }
+      return btnVNs;
+    },
+    renderToolImport: function renderToolImport(h) {
+      // 使用已安装的组件，如果未安装则不渲染
+      var VxeUIButtonComponent = _ui.VxeUI.getComponent('VxeButton');
+      var $xeToolbar = this;
+      var importOpts = $xeToolbar.computeImportOpts;
+      return VxeUIButtonComponent ? h(VxeUIButtonComponent, {
+        key: 'import',
+        props: {
+          circle: true,
+          icon: importOpts.icon || getIcon().TOOLBAR_TOOLS_IMPORT,
+          title: getI18n('vxe.toolbar.import')
+        },
+        on: {
+          click: $xeToolbar.importEvent
+        }
+      }) : renderEmptyElement($xeToolbar);
+    },
+    renderToolExport: function renderToolExport(h) {
+      // 使用已安装的组件，如果未安装则不渲染
+      var VxeUIButtonComponent = _ui.VxeUI.getComponent('VxeButton');
+      var $xeToolbar = this;
+      var exportOpts = $xeToolbar.computeExportOpts;
+      return VxeUIButtonComponent ? h(VxeUIButtonComponent, {
+        key: 'export',
+        props: {
+          circle: true,
+          icon: exportOpts.icon || getIcon().TOOLBAR_TOOLS_EXPORT,
+          title: getI18n('vxe.toolbar.export')
+        },
+        on: {
+          click: $xeToolbar.exportEvent
+        }
+      }) : renderEmptyElement($xeToolbar);
+    },
+    renderToolPrint: function renderToolPrint(h) {
+      // 使用已安装的组件，如果未安装则不渲染
+      var VxeUIButtonComponent = _ui.VxeUI.getComponent('VxeButton');
+      var $xeToolbar = this;
+      var printOpts = $xeToolbar.computePrintOpts;
+      return VxeUIButtonComponent ? h(VxeUIButtonComponent, {
+        key: 'print',
+        props: {
+          circle: true,
+          icon: printOpts.icon || getIcon().TOOLBAR_TOOLS_PRINT,
+          title: getI18n('vxe.toolbar.print')
+        },
+        on: {
+          click: $xeToolbar.printEvent
+        }
+      }) : renderEmptyElement($xeToolbar);
+    },
+    renderToolRefresh: function renderToolRefresh(h) {
+      // 使用已安装的组件，如果未安装则不渲染
+      var VxeUIButtonComponent = _ui.VxeUI.getComponent('VxeButton');
+      var $xeToolbar = this;
+      var reactData = $xeToolbar.reactData;
+      var refreshOpts = $xeToolbar.computeRefreshOpts;
+      return VxeUIButtonComponent ? h(VxeUIButtonComponent, {
+        key: 'refresh',
+        props: {
+          circle: true,
+          icon: reactData.isRefresh ? refreshOpts.iconLoading || getIcon().TOOLBAR_TOOLS_REFRESH_LOADING : refreshOpts.icon || getIcon().TOOLBAR_TOOLS_REFRESH,
+          title: getI18n('vxe.toolbar.refresh')
+        },
+        on: {
+          click: $xeToolbar.refreshEvent
+        }
+      }) : renderEmptyElement($xeToolbar);
+    },
+    renderToolZoom: function renderToolZoom(h) {
+      // 使用已安装的组件，如果未安装则不渲染
+      var VxeUIButtonComponent = _ui.VxeUI.getComponent('VxeButton');
+      var $xeToolbar = this;
+      var $xeGrid = $xeToolbar.$xeGrid;
+      var zoomOpts = $xeToolbar.computeZoomOpts;
+      return $xeGrid && VxeUIButtonComponent ? h(VxeUIButtonComponent, {
+        key: 'zoom',
+        props: {
+          circle: true,
+          icon: $xeGrid.isMaximized() ? zoomOpts.iconOut || getIcon().TOOLBAR_TOOLS_MINIMIZE : zoomOpts.iconIn || getIcon().TOOLBAR_TOOLS_FULLSCREEN,
+          title: getI18n("vxe.toolbar.zoom".concat($xeGrid.isMaximized() ? 'Out' : 'In'))
+        },
+        on: {
+          click: $xeToolbar.zoomEvent
+        }
+      }) : renderEmptyElement($xeToolbar);
+    },
+    renderToolCustom: function renderToolCustom(h) {
+      // 使用已安装的组件，如果未安装则不渲染
+      var VxeUIButtonComponent = _ui.VxeUI.getComponent('VxeButton');
+      var $xeToolbar = this;
+      var customOpts = $xeToolbar.computeCustomOpts;
+      var btnTrigger = $xeToolbar.computeTrigger;
+      var customBtnOns = {};
+      if (btnTrigger === 'manual') {
+        // 手动触发
+      } else if (btnTrigger === 'hover') {
+        // hover 触发
+        customBtnOns.mouseenter = $xeToolbar.handleMouseenterSettingEvent;
+        customBtnOns.mouseleave = $xeToolbar.handleMouseleaveSettingEvent;
+      } else {
+        // 点击触发
+        customBtnOns.click = $xeToolbar.handleClickSettingEvent;
+      }
+      return VxeUIButtonComponent ? h(VxeUIButtonComponent, {
+        key: 'custom',
+        props: {
+          circle: true,
+          icon: customOpts.icon || getIcon().TOOLBAR_TOOLS_CUSTOM,
+          title: getI18n('vxe.toolbar.custom'),
+          className: 'vxe-toolbar-custom-target'
+        },
+        on: customBtnOns
+      }) : renderEmptyElement($xeToolbar);
+    },
+    renderVN: function renderVN(h) {
+      var $xeToolbar = this;
+      var props = $xeToolbar;
+      var slots = $xeToolbar.$scopedSlots;
+      var internalData = $xeToolbar.internalData;
+      var $xeGrid = $xeToolbar.$xeGrid;
+      var perfect = props.perfect,
+        loading = props.loading,
+        refresh = props.refresh,
+        zoom = props.zoom,
+        custom = props.custom,
+        className = props.className;
+      var connectTable = internalData.connectTable;
+      var $table = connectTable;
+      var toolsSlot = slots.tools;
+      var buttonsSlot = slots.buttons;
+      var vSize = $xeToolbar.computeSize;
+      return h('div', {
+        ref: 'refElem',
+        class: ['vxe-toolbar', className ? _xeUtils.default.isFunction(className) ? className({
+          $toolbar: $xeToolbar
+        }) : className : '', _defineProperty(_defineProperty(_defineProperty({}, "size--".concat(vSize), vSize), 'is--perfect', perfect), 'is--loading', loading)]
+      }, [h('div', {
+        class: 'vxe-buttons--wrapper'
+      }, buttonsSlot ? buttonsSlot({
+        $grid: $xeGrid,
+        $table: $table
+      }) : $xeToolbar.renderBtns(h)), h('div', {
+        class: 'vxe-tools--wrapper'
+      }, toolsSlot ? toolsSlot({
+        $grid: $xeGrid,
+        $table: $table
+      }) : $xeToolbar.renderRightTools(h)), h('div', {
+        class: 'vxe-tools--operate'
+      }, [props.import ? $xeToolbar.renderToolImport(h) : renderEmptyElement($xeToolbar), props.export ? $xeToolbar.renderToolExport(h) : renderEmptyElement($xeToolbar), props.print ? $xeToolbar.renderToolPrint(h) : renderEmptyElement($xeToolbar), refresh ? $xeToolbar.renderToolRefresh(h) : renderEmptyElement($xeToolbar), zoom && $xeGrid ? $xeToolbar.renderToolZoom(h) : renderEmptyElement($xeToolbar), custom ? $xeToolbar.renderToolCustom(h) : renderEmptyElement($xeToolbar)])]);
+    }
+  },
+  created: function created() {
+    var _this2 = this;
+    var $xeToolbar = this;
+    var props = $xeToolbar;
+    var $xeGrid = $xeToolbar.$xeGrid;
+    $xeToolbar.$nextTick(function () {
+      var refresh = props.refresh;
+      var refreshOpts = $xeToolbar.computeRefreshOpts;
+      var $xetable = _this2.fintTable();
+      var queryMethod = refreshOpts.queryMethod || refreshOpts.query;
+      if (refresh && !$xeGrid && !queryMethod) {
+        (0, _log.warnLog)('vxe.error.notFunc', ['queryMethod']);
+      }
+      if ($xetable) {
+        $xetable.connect(_this2);
+      }
+      var customOpts = $xeToolbar.computeCustomOpts;
+      if (process.env.NODE_ENV === 'development') {
+        if (customOpts.isFooter) {
+          (0, _log.warnLog)('vxe.error.delProp', ['toolbar.custom.isFooter', 'table.custom-config.showFooter']);
+        }
+        if (customOpts.showFooter) {
+          (0, _log.warnLog)('vxe.error.delProp', ['toolbar.custom.showFooter', 'table.custom-config.showFooter']);
+        }
+        if (customOpts.immediate) {
+          (0, _log.warnLog)('vxe.error.delProp', ['toolbar.custom.immediate', 'table.custom-config.immediate']);
+        }
+        if (customOpts.trigger) {
+          (0, _log.warnLog)('vxe.error.delProp', ['toolbar.custom.trigger', 'table.custom-config.trigger']);
+        }
+      }
+    });
+    if (process.env.NODE_ENV === 'development') {
+      // 使用已安装的组件，如果未安装则不渲染
+      var VxeUIButtonComponent = _ui.VxeUI.getComponent('VxeButton');
+      if (props.refresh || props.import || props.export || props.print || props.zoom) {
+        if (!VxeUIButtonComponent) {
+          (0, _log.errLog)('vxe.error.reqComp', ['vxe-button']);
+        }
       }
     }
+  },
+  render: function render(h) {
+    return this.renderVN(h);
   }
-};
+});