vxe-table 3.16.0-beta.0 → 3.16.0-beta.2

package/lib/grid/src/grid.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+var _comp = require("../../ui/src/comp");
 var _xeUtils = _interopRequireDefault(require("xe-utils"));
 var _utils = require("../../ui/src/utils");
 var _dom = require("../../ui/src/dom");
@@ -20,170 +21,13 @@ const {
   commands,
   globalEvents,
   globalMixins,
+  createEvent,
+  GLOBAL_EVENT_KEYS,
   renderEmptyElement
 } = _ui.VxeUI;
-const methods = {};
+const tableMethods = {};
 const propKeys = Object.keys(_props.default);
 const defaultLayouts = [['Form'], ['Toolbar', 'Top', 'Table', 'Bottom', 'Pager']];
-function initPages($xeGrid, propKey) {
-  const props = $xeGrid;
-  const reactData = $xeGrid;
-  const {
-    tablePage
-  } = reactData;
-  const {
-    pagerConfig
-  } = props;
-  const pagerOpts = $xeGrid.computePagerOpts;
-  if (pagerConfig && (0, _utils.isEnableConf)(pagerOpts)) {
-    if (propKey) {
-      if (pagerOpts[propKey]) {
-        tablePage[propKey] = _xeUtils.default.toNumber(pagerOpts[propKey]);
-      }
-    } else {
-      const {
-        currentPage,
-        pageSize,
-        total
-      } = pagerOpts;
-      if (currentPage) {
-        tablePage.currentPage = currentPage;
-      }
-      if (pageSize) {
-        tablePage.pageSize = pageSize;
-      }
-      if (total) {
-        tablePage.pageSize = total;
-      }
-    }
-  }
-}
-function renderDefaultForm(h, $xeGrid) {
-  const VxeUIFormComponent = _ui.VxeUI.getComponent('VxeForm');
-  const props = $xeGrid;
-  const slots = $xeGrid.$scopedSlots;
-  const reactData = $xeGrid;
-  const {
-    proxyConfig,
-    formConfig
-  } = props;
-  const {
-    formData
-  } = reactData;
-  const proxyOpts = $xeGrid.computeProxyOpts;
-  const formOpts = $xeGrid.computeFormOpts;
-  if ((0, _utils.isEnableConf)(formConfig) && formOpts.items && formOpts.items.length) {
-    const formSlots = {};
-    if (!formOpts.inited) {
-      formOpts.inited = true;
-      const beforeItem = proxyOpts.beforeItem;
-      if (proxyOpts && beforeItem) {
-        formOpts.items.forEach(item => {
-          beforeItem.call($xeGrid, {
-            $grid: $xeGrid,
-            item
-          });
-        });
-      }
-    }
-    // 处理插槽
-    formOpts.items.forEach(item => {
-      _xeUtils.default.each(item.slots, func => {
-        if (!_xeUtils.default.isFunction(func)) {
-          if (slots[func]) {
-            formSlots[func] = slots[func];
-          }
-        }
-      });
-    });
-    return [VxeUIFormComponent ? h(VxeUIFormComponent, {
-      props: Object.assign({}, formOpts, {
-        data: proxyConfig && proxyOpts.form ? formData : formOpts.data
-      }),
-      on: {
-        submit: $xeGrid.submitEvent,
-        reset: $xeGrid.resetEvent,
-        collapse: $xeGrid.collapseEvent,
-        'submit-invalid': $xeGrid.submitInvalidEvent
-      },
-      scopedSlots: formSlots
-    }) : renderEmptyElement($xeGrid)];
-  }
-  return [];
-}
-function getFuncSlot($xeGrid, optSlots, slotKey) {
-  const slots = $xeGrid.$scopedSlots;
-  const funcSlot = optSlots[slotKey];
-  if (funcSlot) {
-    if (_xeUtils.default.isString(funcSlot)) {
-      if (slots[funcSlot]) {
-        return slots[funcSlot];
-      } else {
-        (0, _log.errLog)('vxe.error.notSlot', [funcSlot]);
-      }
-    } else {
-      return funcSlot;
-    }
-  }
-  return null;
-}
-const getConfigSlot = ($xeGrid, slotConfigs) => {
-  const slots = $xeGrid.$scopedSlots;
-  const slotConf = {};
-  _xeUtils.default.objectMap(slotConfigs, (slotFunc, slotKey) => {
-    if (slotFunc) {
-      if (_xeUtils.default.isString(slotFunc)) {
-        if (slots[slotFunc]) {
-          slotConf[slotKey] = slots[slotFunc];
-        } else {
-          (0, _log.errLog)('vxe.error.notSlot', [slotFunc]);
-        }
-      } else {
-        slotConf[slotKey] = slotFunc;
-      }
-    }
-  });
-  return slotConf;
-};
-function getToolbarSlots($xeGrid) {
-  const slots = $xeGrid.$scopedSlots;
-  const toolbarOpts = $xeGrid.computeToolbarOpts;
-  const toolbarOptSlots = toolbarOpts.slots;
-  const toolbarSlots = {};
-  if (slots.buttons && (!toolbarOptSlots || toolbarOptSlots.buttons !== 'buttons')) {
-    (0, _log.warnLog)('vxe.error.reqProp', ['toolbar-config.slots.buttons']);
-  }
-  if (slots.tools && (!toolbarOptSlots || toolbarOptSlots.tools !== 'tools')) {
-    (0, _log.warnLog)('vxe.error.reqProp', ['toolbar-config.slots.tools']);
-  }
-  if (toolbarOptSlots) {
-    const buttonsSlot = getFuncSlot($xeGrid, toolbarOptSlots, 'buttons');
-    const buttonPrefixSlot = getFuncSlot($xeGrid, toolbarOptSlots, 'buttonPrefix');
-    const buttonSuffixSlot = getFuncSlot($xeGrid, toolbarOptSlots, 'buttonSuffix');
-    const toolsSlot = getFuncSlot($xeGrid, toolbarOptSlots, 'tools');
-    const toolPrefixSlot = getFuncSlot($xeGrid, toolbarOptSlots, 'toolPrefix');
-    const toolSuffixSlot = getFuncSlot($xeGrid, toolbarOptSlots, 'toolSuffix');
-    if (buttonsSlot) {
-      toolbarSlots.buttons = buttonsSlot;
-    }
-    if (buttonPrefixSlot) {
-      toolbarSlots.buttonPrefix = buttonPrefixSlot;
-    }
-    if (buttonSuffixSlot) {
-      toolbarSlots.buttonSuffix = buttonSuffixSlot;
-    }
-    if (toolsSlot) {
-      toolbarSlots.tools = toolsSlot;
-    }
-    if (toolPrefixSlot) {
-      toolbarSlots.toolPrefix = toolPrefixSlot;
-    }
-    if (toolSuffixSlot) {
-      toolbarSlots.toolSuffix = toolSuffixSlot;
-    }
-  }
-  return toolbarSlots;
-}
 function getTableOns(_vm) {
   const {
     $listeners,
@@ -206,256 +50,47 @@ function getTableOns(_vm) {
   }
   return ons;
 }
-function pageChangeEvent($xeGrid, params) {
-  const props = $xeGrid;
-  const reactData = $xeGrid;
-  const {
-    proxyConfig
-  } = props;
-  const {
-    tablePage
-  } = reactData;
-  const {
-    $event,
-    currentPage,
-    pageSize
-  } = params;
-  const proxyOpts = $xeGrid.computeProxyOpts;
-  tablePage.currentPage = currentPage;
-  tablePage.pageSize = pageSize;
-  $xeGrid.dispatchEvent('page-change', params, $event);
-  if (proxyConfig && (0, _utils.isEnableConf)(proxyOpts)) {
-    $xeGrid.commitProxy('query').then(rest => {
-      $xeGrid.dispatchEvent('proxy-query', rest, $event);
-    });
-  }
-}
-/**
- * 渲染表单
- */
-function renderForm(h, $xeGrid) {
-  const slots = $xeGrid.$scopedSlots;
-  const props = $xeGrid;
-  const {
-    formConfig
-  } = props;
-  const formSlot = slots.form;
-  const hasForm = !!(formSlot || (0, _utils.isEnableConf)(formConfig));
-  if (hasForm) {
-    return h('div', {
-      key: 'form',
-      ref: 'refFormWrapper',
-      class: 'vxe-grid--form-wrapper'
-    }, formSlot ? formSlot.call($xeGrid, {
-      $grid: $xeGrid
-    }) : renderDefaultForm(h, $xeGrid));
-  }
-  return renderEmptyElement($xeGrid);
-}
-/**
- * 渲染工具栏
- */
-function renderToolbar(h, $xeGrid) {
-  const slots = $xeGrid.$scopedSlots;
-  const props = $xeGrid;
-  const {
-    toolbarConfig
-  } = props;
-  const toolbarSlot = slots.toolbar;
-  const hasToolbar = !!(toolbarSlot || (0, _utils.isEnableConf)(toolbarConfig) || toolbar);
-  const toolbarOpts = $xeGrid.computeToolbarOpts;
-  if (hasToolbar) {
-    return h('div', {
-      key: 'toolbar',
-      ref: 'refToolbarWrapper',
-      class: 'vxe-grid--toolbar-wrapper'
-    }, toolbarSlot ? toolbarSlot.call($xeGrid, {
-      $grid: $xeGrid
-    }) : [h(_toolbar.default, {
-      props: Object.assign({}, toolbarOpts, {
-        slots: undefined
-      }),
-      ref: 'xToolbar',
-      scopedSlots: getToolbarSlots($xeGrid)
-    })]);
-  }
-  return renderEmptyElement($xeGrid);
-}
-/**
- * 渲染表格顶部区域
- */
-function renderTop(h, $xeGrid) {
-  const slots = $xeGrid.$scopedSlots;
-  const topSlot = slots.top;
-  return topSlot ? h('div', {
-    key: 'top',
-    ref: 'refTopWrapper',
-    class: 'vxe-grid--top-wrapper'
-  }, topSlot.call($xeGrid, {
-    $grid: $xeGrid
-  })) : renderEmptyElement($xeGrid);
-}
-function renderTableLeft(h, $xeGrid) {
-  const slots = $xeGrid.$scopedSlots;
-  const leftSlot = slots.left;
-  if (leftSlot) {
-    return h('div', {
-      class: 'vxe-grid--left-wrapper'
-    }, leftSlot({
-      $grid: $xeGrid
-    }));
-  }
-  return renderEmptyElement($xeGrid);
-}
-function renderTableRight(h, $xeGrid) {
-  const slots = $xeGrid.$scopedSlots;
-  const rightSlot = slots.right;
-  if (rightSlot) {
-    return h('div', {
-      class: 'vxe-grid--right-wrapper'
-    }, rightSlot({
-      $grid: $xeGrid
-    }));
-  }
-  return renderEmptyElement($xeGrid);
-}
-/**
- * 渲染表格
- */
-function renderTable(h, $xeGrid) {
-  const slots = $xeGrid.$scopedSlots;
-  const tableProps = $xeGrid.computeTableProps;
-  return h('div', {
-    class: 'vxe-grid--table-wrapper'
-  }, [h('vxe-table', {
-    key: 'table',
-    props: tableProps,
-    on: getTableOns($xeGrid),
-    scopedSlots: slots,
-    ref: 'xTable'
-  })]);
-}
-/**
- * 渲染表格底部区域
- */
-function renderBottom(h, $xeGrid) {
-  const slots = $xeGrid.$scopedSlots;
-  const bottomSlot = slots.bottom;
-  return bottomSlot ? h('div', {
-    key: 'bottom',
-    ref: 'refBottomWrapper',
-    class: 'vxe-grid--bottom-wrapper'
-  }, bottomSlot.call($xeGrid, {
-    $grid: $xeGrid
-  })) : renderEmptyElement($xeGrid);
-}
-/**
- * 渲染分页
- */
-function renderPager(h, $xeGrid) {
-  const VxeUIPagerComponent = _ui.VxeUI.getComponent('VxePager');
-  const props = $xeGrid;
-  const slots = $xeGrid.$scopedSlots;
-  const reactData = $xeGrid;
-  const {
-    proxyConfig,
-    pagerConfig
-  } = props;
-  const proxyOpts = $xeGrid.computeProxyOpts;
-  const pagerOpts = $xeGrid.computePagerOpts;
-  const pagerSlot = slots.pager;
-  if (pagerConfig && (0, _utils.isEnableConf)(pagerOpts) || slots.pager) {
-    return h('div', {
-      ref: 'refPagerWrapper',
-      key: 'pager',
-      class: 'vxe-grid--pager-wrapper'
-    }, pagerSlot ? pagerSlot.call($xeGrid, {
-      $grid: $xeGrid
-    }) : [VxeUIPagerComponent ? h(VxeUIPagerComponent, {
-      ref: 'refPager',
-      props: Object.assign(Object.assign({}, pagerOpts), proxyConfig && (0, _utils.isEnableConf)(proxyOpts) ? reactData.tablePage : {}),
-      on: {
-        'page-change'(params) {
-          pageChangeEvent($xeGrid, params);
-        }
-      },
-      scopedSlots: getConfigSlot($xeGrid, pagerOpts.slots)
-    }) : renderEmptyElement($xeGrid)]);
-  }
-  return renderEmptyElement($xeGrid);
-}
-function renderChildLayout(h, $xeGrid, layoutKeys) {
-  const childVNs = [];
-  layoutKeys.forEach(key => {
-    switch (key) {
-      case 'Form':
-        childVNs.push(renderForm(h, $xeGrid));
-        break;
-      case 'Toolbar':
-        childVNs.push(renderToolbar(h, $xeGrid));
-        break;
-      case 'Top':
-        childVNs.push(renderTop(h, $xeGrid));
-        break;
-      case 'Table':
-        childVNs.push(h('div', {
-          key: 'table',
-          class: 'vxe-grid--table-container'
-        }, [renderTableLeft(h, $xeGrid), renderTable(h, $xeGrid), renderTableRight(h, $xeGrid)]));
-        break;
-      case 'Bottom':
-        childVNs.push(renderBottom(h, $xeGrid));
-        break;
-      case 'Pager':
-        childVNs.push(renderPager(h, $xeGrid));
-        break;
-      default:
-        (0, _log.errLog)('vxe.error.notProp', [`layouts -> ${key}`]);
-        break;
-    }
-  });
-  return childVNs;
-}
-function renderLayout(h, $xeGrid) {
-  const slots = $xeGrid.$scopedSlots;
-  const currLayoutConf = $xeGrid.computeCurrLayoutConf;
-  const {
-    headKeys,
-    bodyKeys,
-    footKeys
-  } = currLayoutConf;
-  const asideLeftSlot = slots.asideLeft || slots['aside-left'];
-  const asideRightSlot = slots.asideRight || slots['aside-right'];
-  return [h('div', {
-    class: 'vxe-grid--layout-header-wrapper'
-  }, renderChildLayout(h, $xeGrid, headKeys)), h('div', {
-    class: 'vxe-grid--layout-body-wrapper'
-  }, [asideLeftSlot ? h('div', {
-    class: 'vxe-grid--layout-aside-left-wrapper'
-  }, asideLeftSlot({})) : renderEmptyElement($xeGrid), h('div', {
-    class: 'vxe-grid--layout-body-content-wrapper'
-  }, renderChildLayout(h, $xeGrid, bodyKeys)), asideRightSlot ? h('div', {
-    class: 'vxe-grid--layout-aside-right-wrapper'
-  }, asideRightSlot({})) : renderEmptyElement($xeGrid)]), h('div', {
-    class: 'vxe-grid--layout-footer-wrapper'
-  }, renderChildLayout(h, $xeGrid, footKeys))];
-}
-Object.keys(_table.default.methods).forEach(name => {
-  methods[name] = function (...args) {
-    return this.$refs.xTable && this.$refs.xTable[name](...args);
+_xeUtils.default.each(_table.default.methods, (fn, name) => {
+  tableMethods[name] = function (...args) {
+    const $xeGrid = this;
+    const $xeTable = $xeGrid.$refs.refTable;
+    return $xeTable && $xeTable[name](...args);
   };
 });
-var _default = exports.default = {
+var _default = exports.default = /* define-vxe-component start */(0, _comp.defineVxeComponent)({
   name: 'VxeGrid',
   mixins: [globalMixins.sizeMixin],
-  props: Object.assign(Object.assign({}, _props.default), {
+  props: Object.assign(Object.assign({
+    // 以下仅用于类型
+    round: {
+      type: Boolean,
+      default: () => getConfig().table.round
+    },
+    height: [Number, String],
+    minHeight: {
+      type: [Number, String],
+      default: () => getConfig().table.minHeight
+    },
+    maxHeight: [Number, String],
+    seqConfig: Object,
+    sortConfig: Object,
+    filterConfig: Object,
+    editConfig: [Boolean, Object],
+    loading: Boolean,
+    validConfig: Object,
+    editRules: Object,
+    animat: {
+      type: Boolean,
+      default: () => getConfig().table.animat
+    }
+  }, _props.default), {
+    // 以上仅用于类型
     layouts: Array,
     columns: Array,
-    pagerConfig: [Boolean, Object],
+    pagerConfig: Object,
     proxyConfig: Object,
-    toolbar: [Boolean, Object],
-    toolbarConfig: [Boolean, Object],
-    formConfig: [Boolean, Object],
+    toolbarConfig: Object,
+    formConfig: Object,
     zoomConfig: Object,
     size: {
       type: String,
@@ -463,14 +98,17 @@ var _default = exports.default = {
     }
   }),
   provide() {
+    const $xeGrid = this;
     return {
-      $xeGrid: this
+      $xeGrid
     };
   },
   data() {
     var _a;
-    return {
+    const xID = _xeUtils.default.uniqueId();
+    const reactData = {
       tableLoading: false,
+      proxyInited: false,
       isZMax: false,
       tableData: [],
       filterData: [],
@@ -483,51 +121,79 @@ var _default = exports.default = {
         currentPage: 1
       }
     };
+    return {
+      xID,
+      reactData
+    };
   },
-  computed: {
+  computed: Object.assign(Object.assign({}, {}), {
     isRespMsg() {
-      const {
-        proxyOpts
-      } = this;
-      return _xeUtils.default.isBoolean(proxyOpts.message) ? proxyOpts.message : proxyOpts.showResponseMsg;
+      const $xeGrid = this;
+      return $xeGrid.computeIsRespMsg;
+    },
+    computeIsRespMsg() {
+      const $xeGrid = this;
+      const proxyOpts = $xeGrid.computeProxyOpts;
+      return !!(_xeUtils.default.isBoolean(proxyOpts.message) ? proxyOpts.message : proxyOpts.showResponseMsg);
     },
     isActiveMsg() {
-      return this.proxyOpts.showActiveMsg;
+      const $xeGrid = this;
+      return $xeGrid.computeIsActiveMsg;
+    },
+    computeIsActiveMsg() {
+      const $xeGrid = this;
+      const proxyOpts = $xeGrid.computeProxyOpts;
+      return !!proxyOpts.showActiveMsg;
     },
     proxyOpts() {
-      return this.computeProxyOpts;
+      const $xeGrid = this;
+      return $xeGrid.computeProxyOpts;
     },
     computeProxyOpts() {
-      return _xeUtils.default.merge({}, _xeUtils.default.clone(getConfig().grid.proxyConfig, true), this.proxyConfig);
+      const $xeGrid = this;
+      const props = $xeGrid;
+      return _xeUtils.default.merge({}, _xeUtils.default.clone(getConfig().grid.proxyConfig, true), props.proxyConfig);
     },
     pagerOpts() {
-      return this.computePagerOpts;
+      const $xeGrid = this;
+      return $xeGrid.computePagerOpts;
     },
     computePagerOpts() {
-      return Object.assign({}, getConfig().grid.pagerConfig, this.pagerConfig);
+      const $xeGrid = this;
+      const props = $xeGrid;
+      return Object.assign({}, getConfig().grid.pagerConfig, props.pagerConfig);
     },
     formOpts() {
-      return this.computeFormOpts;
+      const $xeGrid = this;
+      return $xeGrid.computeFormOpts;
     },
     computeFormOpts() {
-      return Object.assign({}, getConfig().grid.formConfig, this.formConfig);
+      const $xeGrid = this;
+      const props = $xeGrid;
+      return Object.assign({}, getConfig().grid.formConfig, props.formConfig);
     },
     toolbarOpts() {
-      return this.computeToolbarOpts;
+      const $xeGrid = this;
+      return $xeGrid.computeToolbarOpts;
     },
     computeToolbarOpts() {
-      return Object.assign({}, getConfig().grid.toolbarConfig, this.toolbarConfig || this.toolbar);
+      const $xeGrid = this;
+      const props = $xeGrid;
+      return Object.assign({}, getConfig().grid.toolbarConfig, props.toolbarConfig);
     },
     zoomOpts() {
-      return this.computeZoomOpts;
+      const $xeGrid = this;
+      return $xeGrid.computeZoomOpts;
     },
     computeZoomOpts() {
-      return Object.assign({}, getConfig().grid.zoomConfig, this.zoomConfig);
+      const $xeGrid = this;
+      const props = $xeGrid;
+      return Object.assign({}, getConfig().grid.zoomConfig, props.zoomConfig);
     },
     computeStyles() {
       const $xeGrid = this;
       const props = $xeGrid;
-      const reactData = $xeGrid;
+      const reactData = $xeGrid.reactData;
       const {
         height,
         maxHeight
@@ -549,26 +215,34 @@ var _default = exports.default = {
       }
       return stys;
     },
-    tableExtendProps() {
+    computeTableExtendProps() {
+      const $xeGrid = this;
+      const props = $xeGrid;
       const rest = {};
+      const gridProps = props;
       propKeys.forEach(key => {
-        rest[key] = this[key];
+        rest[key] = gridProps[key];
       });
       return rest;
     },
     computeTableProps() {
+      const $xeGrid = this;
+      const props = $xeGrid;
+      const reactData = $xeGrid.reactData;
       const {
-        isZMax,
         seqConfig,
         pagerConfig,
-        loading,
         editConfig,
-        proxyConfig,
-        proxyOpts,
-        tableExtendProps,
-        tableLoading,
+        proxyConfig
+      } = props;
+      const {
+        isZMax,
         tablePage
-      } = this;
+      } = reactData;
+      const tableExtendProps = $xeGrid.computeTableExtendProps;
+      const proxyOpts = $xeGrid.computeProxyOpts;
+      const pagerOpts = $xeGrid.computePagerOpts;
+      const isLoading = $xeGrid.computeIsLoading;
       const tProps = Object.assign({}, tableExtendProps);
       if (isZMax) {
         if (tableExtendProps.maxHeight) {
@@ -577,9 +251,9 @@ var _default = exports.default = {
           tProps.height = '100%';
         }
       }
-      if (proxyConfig) {
-        tProps.loading = loading || tableLoading;
-        if (proxyOpts.seq && (0, _utils.isEnableConf)(pagerConfig)) {
+      if (proxyConfig && (0, _utils.isEnableConf)(proxyOpts)) {
+        tProps.loading = isLoading;
+        if (pagerConfig && proxyOpts.seq && (0, _utils.isEnableConf)(pagerOpts)) {
           tProps.seqConfig = Object.assign({}, seqConfig, {
             startIndex: (tablePage.currentPage - 1) * tablePage.pageSize
           });
@@ -591,7 +265,8 @@ var _default = exports.default = {
       return tProps;
     },
     tableProps() {
-      return this.computeTableProps;
+      const $xeGrid = this;
+      return $xeGrid.computeTableProps;
     },
     computeCurrLayoutConf() {
       const $xeGrid = this;
@@ -637,101 +312,100 @@ var _default = exports.default = {
       const $xeGrid = this;
       const pagerOpts = $xeGrid.computePagerOpts;
       return pagerOpts.total;
+    },
+    computeIsLoading() {
+      const $xeGrid = this;
+      const props = $xeGrid;
+      const reactData = $xeGrid.reactData;
+      const {
+        loading,
+        proxyConfig
+      } = props;
+      const {
+        tableLoading
+      } = reactData;
+      const proxyOpts = $xeGrid.computeProxyOpts;
+      const {
+        showLoading
+      } = proxyOpts;
+      return loading || tableLoading && showLoading && proxyConfig && (0, _utils.isEnableConf)(proxyOpts);
     }
-  },
+  }),
   watch: {
     columns(value) {
-      this.$nextTick(() => this.loadColumn(value));
+      const $xeGrid = this;
+      $xeGrid.$nextTick(() => $xeGrid.loadColumn(value));
     },
     toolbar(value) {
+      const $xeGrid = this;
       if (value) {
-        this.initToolbar();
+        $xeGrid.initToolbar();
       }
     },
     toolbarConfig(value) {
+      const $xeGrid = this;
       if (value) {
-        this.initToolbar();
+        $xeGrid.initToolbar();
       }
     },
     proxyConfig() {
-      this.initProxy();
+      const $xeGrid = this;
+      $xeGrid.initProxy();
     },
     computeCustomCurrentPageFlag() {
       const $xeGrid = this;
-      initPages($xeGrid, 'currentPage');
+      $xeGrid.initPages('currentPage');
     },
     computeCustomPageSizeFlag() {
       const $xeGrid = this;
-      initPages($xeGrid, 'pageSize');
+      $xeGrid.initPages('pageSize');
     },
     computeCustomTotalFlag() {
       const $xeGrid = this;
-      initPages($xeGrid, 'total');
+      $xeGrid.initPages('total');
     }
   },
-  created() {
-    const $xeGrid = this;
-    const props = $xeGrid;
-    // const { data, formOpts, proxyOpts, proxyConfig } = this
-    // if (proxyConfig && (data || (proxyOpts.form && formOpts.data))) {
-    //   errLog('vxe.error.errConflicts', ['grid.data', 'grid.proxy-config'])
-    // }
-    if (this.toolbar) {
-      (0, _log.warnLog)('vxe.error.delProp', ['grid.toolbar', 'grid.toolbar-config']);
-    }
-    if (this.toolbarConfig && !_xeUtils.default.isObject(this.toolbarConfig)) {
-      (0, _log.warnLog)('vxe.error.errProp', [`grid.toolbar-config=${this.toolbarConfig}`, 'grid.toolbar-config={}']);
-    }
-    // if (proxyOpts.props) {
-    //   warnLog('vxe.error.delProp', ['proxy-config.props', 'proxy-config.response'])
-    // }
-    // 使用已安装的组件，如果未安装则不渲染
-    const VxeUIFormComponent = _ui.VxeUI.getComponent('VxeForm');
-    const VxeUIPagerComponent = _ui.VxeUI.getComponent('VxePager');
-    $xeGrid.$nextTick(() => {
-      if (props.formConfig) {
-        if (!VxeUIFormComponent) {
-          (0, _log.errLog)('vxe.error.reqComp', ['vxe-form']);
-        }
-      }
-      if (props.pagerConfig) {
-        if (!VxeUIPagerComponent) {
-          (0, _log.errLog)('vxe.error.reqComp', ['vxe-pager']);
+  methods: Object.assign(Object.assign({}, tableMethods), {
+    dispatchEvent(type, params, evnt) {
+      const $xeGrid = this;
+      $xeGrid.$emit(type, createEvent(evnt, {
+        $grid: $xeGrid
+      }, params));
+    },
+    initPages(propKey) {
+      const $xeGrid = this;
+      const props = $xeGrid;
+      const reactData = $xeGrid.reactData;
+      const {
+        tablePage
+      } = reactData;
+      const {
+        pagerConfig
+      } = props;
+      const pagerOpts = $xeGrid.computePagerOpts;
+      if (pagerConfig && (0, _utils.isEnableConf)(pagerOpts)) {
+        if (propKey) {
+          if (pagerOpts[propKey]) {
+            tablePage[propKey] = _xeUtils.default.toNumber(pagerOpts[propKey]);
+          }
+        } else {
+          const {
+            currentPage,
+            pageSize,
+            total
+          } = pagerOpts;
+          if (currentPage) {
+            tablePage.currentPage = currentPage;
+          }
+          if (pageSize) {
+            tablePage.pageSize = pageSize;
+          }
+          if (total) {
+            tablePage.pageSize = total;
+          }
         }
       }
-    });
-    initPages($xeGrid);
-    globalEvents.on(this, 'keydown', this.handleGlobalKeydownEvent);
-  },
-  mounted() {
-    if (this.columns && this.columns.length) {
-      this.loadColumn(this.columns);
-    }
-    this.initToolbar();
-    this.initProxy();
-  },
-  destroyed() {
-    globalEvents.off(this, 'keydown');
-  },
-  render(h) {
-    const $xeGrid = this;
-    const props = $xeGrid;
-    const reactData = $xeGrid;
-    const vSize = $xeGrid.computeSize;
-    const styles = $xeGrid.computeStyles;
-    return h('div', {
-      ref: 'refElem',
-      class: ['vxe-grid', {
-        [`size--${vSize}`]: vSize,
-        'is--animat': !!this.animat,
-        'is--round': this.round,
-        'is--maximize': reactData.isZMax,
-        'is--loading': props.loading || reactData.tableLoading
-      }],
-      style: styles
-    }, renderLayout(h, $xeGrid));
-  },
-  methods: Object.assign(Object.assign({}, methods), {
+    },
     callSlot(slotFunc, params, h, vNodes) {
       const $xeGrid = this;
       const slots = $xeGrid.$scopedSlots;
@@ -754,7 +428,7 @@ var _default = exports.default = {
      */
     getExcludeHeight() {
       const $xeGrid = this;
-      const reactData = $xeGrid;
+      const reactData = $xeGrid.reactData;
       const {
         isZMax
       } = reactData;
@@ -773,7 +447,7 @@ var _default = exports.default = {
     },
     getParentHeight() {
       const $xeGrid = this;
-      const reactData = $xeGrid;
+      const reactData = $xeGrid.reactData;
       const el = $xeGrid.$refs.refElem;
       if (el) {
         const parentEl = el.parentElement;
@@ -782,67 +456,147 @@ var _default = exports.default = {
       return 0;
     },
     initToolbar() {
-      this.$nextTick(() => {
-        const {
-          xTable,
-          xToolbar
-        } = this.$refs;
-        if (xTable && xToolbar) {
-          xTable.connect(xToolbar);
+      const $xeGrid = this;
+      $xeGrid.$nextTick(() => {
+        const $xeTable = $xeGrid.$refs.refTable;
+        const $xeToolbar = $xeGrid.$refs.refToolbar;
+        if ($xeTable && $xeToolbar) {
+          $xeTable.connect($xeToolbar);
         }
       });
     },
+    getDefaultFormData() {
+      const $xeGrid = this;
+      const formOpts = $xeGrid.computeFormOpts;
+      if (formOpts.items) {
+        const fData = {};
+        formOpts.items.forEach(item => {
+          const {
+            field,
+            itemRender
+          } = item;
+          if (field) {
+            let itemValue = null;
+            if (itemRender) {
+              const {
+                defaultValue
+              } = itemRender;
+              if (_xeUtils.default.isFunction(defaultValue)) {
+                itemValue = defaultValue({
+                  item
+                });
+              } else if (!_xeUtils.default.isUndefined(defaultValue)) {
+                itemValue = defaultValue;
+              }
+            }
+            fData[field] = itemValue;
+          }
+        });
+        return fData;
+      }
+      return {};
+    },
     initProxy() {
+      const $xeGrid = this;
+      const props = $xeGrid;
+      const reactData = $xeGrid.reactData;
       const {
-        proxyInited,
         proxyConfig,
-        proxyOpts,
-        formConfig,
-        formOpts
-      } = this;
+        formConfig
+      } = props;
+      const {
+        proxyInited
+      } = reactData;
+      const proxyOpts = $xeGrid.computeProxyOpts;
+      const formOpts = $xeGrid.computeFormOpts;
       if (proxyConfig) {
         if ((0, _utils.isEnableConf)(formConfig) && proxyOpts.form && formOpts.items) {
-          const fData = {};
-          formOpts.items.forEach(item => {
-            const {
-              field,
-              itemRender
-            } = item;
-            if (field) {
-              let itemValue = null;
-              if (itemRender) {
-                const {
-                  defaultValue
-                } = itemRender;
-                if (_xeUtils.default.isFunction(defaultValue)) {
-                  itemValue = defaultValue({
-                    item
-                  });
-                } else if (!_xeUtils.default.isUndefined(defaultValue)) {
-                  itemValue = defaultValue;
-                }
-              }
-              fData[field] = itemValue;
-            }
-          });
-          this.formData = fData;
+          reactData.formData = $xeGrid.getDefaultFormData();
         }
         if (!proxyInited && proxyOpts.autoLoad !== false) {
-          this.proxyInited = true;
-          this.$nextTick().then(() => this.commitProxy('_init')).then(rest => {
-            this.$emit('proxy-query', Object.assign(Object.assign({}, rest), {
-              isInited: true,
-              $grid: this,
-              $event: new Event('init')
-            }));
+          reactData.proxyInited = true;
+          $xeGrid.$nextTick().then(() => $xeGrid.commitProxy('initial')).then(rest => {
+            $xeGrid.dispatchEvent('proxy-query', Object.assign(Object.assign({}, rest), {
+              isInited: true
+            }), new Event('initial'));
           });
         }
       }
     },
     handleGlobalKeydownEvent(evnt) {
-      const isEsc = evnt.keyCode === 27;
-      if (isEsc && this.isZMax && this.zoomOpts.escRestore !== false) {
-        this.triggerZoomEvent(evnt);
+      const $xeGrid = this;
+      const reactData = $xeGrid.reactData;
+      const zoomOpts = $xeGrid.computeZoomOpts;
+      const isEsc = globalEvents.hasKey(evnt, GLOBAL_EVENT_KEYS.ESCAPE);
+      if (isEsc && reactData.isZMax && zoomOpts.escRestore !== false) {
+        $xeGrid.triggerZoomEvent(evnt);
+      }
+    },
+    getRespMsg(rest, defaultMsg) {
+      const $xeGrid = this;
+      const proxyOpts = $xeGrid.computeProxyOpts;
+      const resConfigs = proxyOpts.response || proxyOpts.props || {};
+      const messageProp = resConfigs.message;
+      let msg;
+      if (rest && messageProp) {
+        msg = _xeUtils.default.isFunction(messageProp) ? messageProp({
+          data: rest,
+          $grid: $xeGrid
+        }) : _xeUtils.default.get(rest, messageProp);
+      }
+      return msg || getI18n(defaultMsg);
+    },
+    handleDeleteRow(code, alertKey, callback) {
+      const $xeGrid = this;
+      const isActiveMsg = $xeGrid.computeIsActiveMsg;
+      const selectRecords = $xeGrid.getCheckboxRecords();
+      if (isActiveMsg) {
+        if (selectRecords.length) {
+          if (_ui.VxeUI.modal) {
+            return _ui.VxeUI.modal.confirm({
+              id: `cfm_${code}`,
+              content: getI18n(alertKey),
+              escClosable: true
+            }).then(type => {
+              if (type === 'confirm') {
+                return callback();
+              }
+            });
+          }
+        } else {
+          if (_ui.VxeUI.modal) {
+            _ui.VxeUI.modal.message({
+              id: `msg_${code}`,
+              content: getI18n('vxe.grid.selectOneRecord'),
+              status: 'warning'
+            });
+          }
+        }
+      } else {
+        if (selectRecords.length) {
+          callback();
+        }
+      }
+      return Promise.resolve();
+    },
+    triggerPendingEvent(code) {
+      const $xeGrid = this;
+      const isActiveMsg = $xeGrid.computeIsActiveMsg;
+      const $xeTable = $xeGrid.$refs.refTable;
+      const selectRecords = $xeTable.getCheckboxRecords();
+      if (selectRecords.length) {
+        $xeTable.togglePendingRow(selectRecords);
+        $xeGrid.clearCheckboxRow();
+      } else {
+        if (isActiveMsg) {
+          if (_ui.VxeUI.modal) {
+            _ui.VxeUI.modal.message({
+              id: code,
+              content: getI18n('vxe.grid.selectOneRecord'),
+              status: 'warning'
+            });
+          }
+        }
       }
     },
     /**
@@ -851,21 +605,28 @@ var _default = exports.default = {
      */
     commitProxy(proxyTarget, ...args) {
       const $xeGrid = this;
-      const reactData = $xeGrid;
+      const props = $xeGrid;
+      const reactData = $xeGrid.reactData;
+      /**
+       * 已废弃
+       * @deprecated
+       */
+      const toolbar = props.toolbar;
       const {
-        $refs,
-        toolbar,
+        proxyConfig,
         toolbarConfig,
-        toolbarOpts,
-        proxyOpts,
-        tablePage,
         pagerConfig,
         editRules,
-        isRespMsg,
-        isActiveMsg,
-        validConfig,
-        pagerOpts
-      } = this;
+        validConfig
+      } = props;
+      const {
+        tablePage
+      } = reactData;
+      const isActiveMsg = $xeGrid.computeIsActiveMsg;
+      const isRespMsg = $xeGrid.computeIsRespMsg;
+      const proxyOpts = $xeGrid.computeProxyOpts;
+      const pagerOpts = $xeGrid.computePagerOpts;
+      const toolbarOpts = $xeGrid.computeToolbarOpts;
       const {
         beforeQuery,
         afterQuery,
@@ -876,16 +637,19 @@ var _default = exports.default = {
         ajax = {}
       } = proxyOpts;
       const resConfigs = proxyOpts.response || proxyOpts.props || {};
-      const $xeTable = $refs.xTable;
-      const formData = this.getFormData();
-      let button;
-      let code;
+      const $xeTable = $xeGrid.$refs.refTable;
+      let formData = $xeGrid.getFormData();
+      let button = null;
+      let code = null;
       if (_xeUtils.default.isString(proxyTarget)) {
-        const matchObj = toolbarConfig || toolbar ? _xeUtils.default.findTree(toolbarOpts.buttons, item => item.code === proxyTarget, {
+        const {
+          buttons
+        } = toolbarOpts;
+        const matchObj = (toolbarConfig || toolbar) && (0, _utils.isEnableConf)(toolbarOpts) && buttons ? _xeUtils.default.findTree(buttons, item => item.code === proxyTarget, {
           children: 'dropdowns'
         }) : null;
-        code = proxyTarget;
         button = matchObj ? matchObj.item : null;
+        code = proxyTarget;
       } else {
         button = proxyTarget;
         code = button.code;
@@ -905,10 +669,10 @@ var _default = exports.default = {
           }) => $xeTable.setEditRow(row));
         // 已废弃
         case 'mark_cancel':
-          this.triggerPendingEvent(code);
+          $xeGrid.triggerPendingEvent(code);
           break;
         case 'remove':
-          return this.handleDeleteRow(code, 'vxe.grid.removeSelectRecord', () => this.removeCheckboxRow());
+          return $xeGrid.handleDeleteRow(code, 'vxe.grid.removeSelectRecord', () => $xeTable.removeCheckboxRow());
         case 'import':
           $xeTable.importData(btnParams);
           break;
@@ -924,7 +688,7 @@ var _default = exports.default = {
         case 'reset_custom':
           $xeTable.resetCustom(true);
           break;
-        case '_init':
+        case 'initial':
         case 'reload':
         case 'query':
           {
@@ -932,7 +696,7 @@ var _default = exports.default = {
             const querySuccessMethods = ajax.querySuccess;
             const queryErrorMethods = ajax.queryError;
             if (ajaxMethods) {
-              const isInited = code === '_init';
+              const isInited = code === 'initial';
               const isReload = code === 'reload';
               if (!isInited && reactData.tableLoading) {
                 return $xeGrid.$nextTick();
@@ -949,27 +713,46 @@ var _default = exports.default = {
                 }
               }
               if (isInited) {
-                let defaultSort = null;
+                // 重置代理表单数据
+                if (proxyConfig && (0, _utils.isEnableConf)(proxyOpts) && proxyOpts.form) {
+                  formData = $xeGrid.getDefaultFormData();
+                  reactData.formData = formData;
+                }
                 if ($xeTable) {
+                  const tableInternalData = $xeTable;
                   const {
-                    sortOpts
-                  } = $xeTable;
-                  defaultSort = sortOpts.defaultSort;
-                }
-                // 如果使用默认排序
-                if (defaultSort) {
-                  if (!_xeUtils.default.isArray(defaultSort)) {
-                    defaultSort = [defaultSort];
+                    tableFullColumn,
+                    fullColumnFieldData
+                  } = tableInternalData;
+                  const sortOpts = $xeTable.computeSortOpts;
+                  let defaultSort = sortOpts.defaultSort;
+                  tableFullColumn.forEach(column => {
+                    column.order = null;
+                  });
+                  // 如果使用默认排序
+                  if (defaultSort) {
+                    if (!_xeUtils.default.isArray(defaultSort)) {
+                      defaultSort = [defaultSort];
+                    }
+                    sortList = defaultSort.map(item => {
+                      const {
+                        field,
+                        order
+                      } = item;
+                      const colRest = fullColumnFieldData[field];
+                      if (colRest) {
+                        const column = colRest.column;
+                        if (column) {
+                          column.order = order;
+                        }
+                      }
+                      return {
+                        field,
+                        property: field,
+                        order
+                      };
+                    });
                   }
-                  sortList = defaultSort.map(item => {
-                    return {
-                      field: item.field,
-                      property: item.field,
-                      order: item.order
-                    };
-                  });
-                }
-                if ($xeTable) {
                   filterList = $xeTable.getCheckedFilters();
                 }
               } else {
@@ -987,7 +770,7 @@ var _default = exports.default = {
                 button,
                 isInited,
                 isReload,
-                $grid: this,
+                $grid: $xeGrid,
                 page: pageParams,
                 sort: sortList.length ? sortList[0] : {},
                 sorts: sortList,
@@ -995,25 +778,25 @@ var _default = exports.default = {
                 form: formData,
                 options: ajaxMethods
               };
-              this.sortData = sortList;
-              this.filterData = filterList;
-              this.tableLoading = true;
+              reactData.sortData = sortList;
+              reactData.filterData = filterList;
+              reactData.tableLoading = true;
               const applyArgs = [commitParams].concat(args);
               return Promise.resolve((beforeQuery || ajaxMethods)(...applyArgs)).then(rest => {
                 let tableData = [];
-                this.tableLoading = false;
+                reactData.tableLoading = false;
                 if (rest) {
                   if (pagerConfig && (0, _utils.isEnableConf)(pagerOpts)) {
                     const totalProp = resConfigs.total;
                     const total = (_xeUtils.default.isFunction(totalProp) ? totalProp({
                       data: rest,
-                      $grid: this
+                      $grid: $xeGrid
                     }) : _xeUtils.default.get(rest, totalProp || 'page.total')) || 0;
                     tablePage.total = _xeUtils.default.toNumber(total);
                     const resultProp = resConfigs.result;
                     tableData = (_xeUtils.default.isFunction(resultProp) ? resultProp({
                       data: rest,
-                      $grid: this
+                      $grid: $xeGrid
                     }) : _xeUtils.default.get(rest, resultProp || 'result')) || [];
                     // 检验当前页码，不能超出当前最大页数
                     const pageCount = Math.max(Math.ceil(total / tablePage.pageSize), 1);
@@ -1024,7 +807,7 @@ var _default = exports.default = {
                     const listProp = resConfigs.list;
                     tableData = (listProp ? _xeUtils.default.isFunction(listProp) ? listProp({
                       data: rest,
-                      $grid: this
+                      $grid: $xeGrid
                     }) : _xeUtils.default.get(rest, listProp) : rest) || [];
                   }
                 }
@@ -1049,7 +832,7 @@ var _default = exports.default = {
                   status: true
                 };
               }).catch(rest => {
-                this.tableLoading = false;
+                reactData.tableLoading = false;
                 if (queryErrorMethods) {
                   queryErrorMethods(Object.assign(Object.assign({}, commitParams), {
                     response: rest
@@ -1076,7 +859,7 @@ var _default = exports.default = {
                 removeRecords
               };
               const commitParams = {
-                $grid: this,
+                $grid: $xeGrid,
                 code,
                 button,
                 body,
@@ -1085,13 +868,13 @@ var _default = exports.default = {
               };
               const applyArgs = [commitParams].concat(args);
               if (selectRecords.length) {
-                return this.handleDeleteRow(code, 'vxe.grid.deleteSelectRecord', () => {
+                return $xeGrid.handleDeleteRow(code, 'vxe.grid.deleteSelectRecord', () => {
                   if (!removeRecords.length) {
                     return $xeTable.remove(selectRecords);
                   }
-                  this.tableLoading = true;
+                  reactData.tableLoading = true;
                   return Promise.resolve((beforeDelete || ajaxMethods)(...applyArgs)).then(rest => {
-                    this.tableLoading = false;
+                    reactData.tableLoading = false;
                     $xeTable.setPendingRow(removeRecords, false);
                     if (isRespMsg) {
                       // 检测弹窗模块
@@ -1099,14 +882,14 @@ var _default = exports.default = {
                         (0, _log.errLog)('vxe.error.reqModule', ['Modal']);
                       }
                       _ui.VxeUI.modal.message({
-                        content: this.getRespMsg(rest, 'vxe.grid.delSuccess'),
+                        content: $xeGrid.getRespMsg(rest, 'vxe.grid.delSuccess'),
                         status: 'success'
                       });
                     }
                     if (afterDelete) {
                       afterDelete(...applyArgs);
                     } else {
-                      this.commitProxy('query');
+                      $xeGrid.commitProxy('query');
                     }
                     if (deleteSuccessMethods) {
                       deleteSuccessMethods(Object.assign(Object.assign({}, commitParams), {
@@ -1117,7 +900,7 @@ var _default = exports.default = {
                       status: true
                     };
                   }).catch(rest => {
-                    this.tableLoading = false;
+                    reactData.tableLoading = false;
                     if (isRespMsg) {
                       // 检测弹窗模块
                       if (!_ui.VxeUI.modal) {
@@ -1125,7 +908,7 @@ var _default = exports.default = {
                       }
                       _ui.VxeUI.modal.message({
                         id: code,
-                        content: this.getRespMsg(rest, 'vxe.grid.operError'),
+                        content: $xeGrid.getRespMsg(rest, 'vxe.grid.operError'),
                         status: 'error'
                       });
                     }
@@ -1163,7 +946,7 @@ var _default = exports.default = {
             const saveSuccessMethods = ajax.saveSuccess;
             const saveErrorMethods = ajax.saveError;
             if (ajaxMethods) {
-              const body = this.getRecordset();
+              const body = $xeGrid.getRecordset();
               const {
                 insertRecords,
                 removeRecords,
@@ -1171,7 +954,7 @@ var _default = exports.default = {
                 pendingRecords
               } = body;
               const commitParams = {
-                $grid: this,
+                $grid: $xeGrid,
                 code,
                 button,
                 body,
@@ -1190,7 +973,7 @@ var _default = exports.default = {
               let restPromise = Promise.resolve();
               if (editRules) {
                 // 只校验新增和修改的数据
-                restPromise = this[validConfig && validConfig.msgMode === 'full' ? 'fullValidate' : 'validate'](body.insertRecords.concat(updateRecords));
+                restPromise = $xeGrid[validConfig && validConfig.msgMode === 'full' ? 'fullValidate' : 'validate'](body.insertRecords.concat(updateRecords));
               }
               return restPromise.then(errMap => {
                 if (errMap) {
@@ -1198,9 +981,9 @@ var _default = exports.default = {
                   return;
                 }
                 if (body.insertRecords.length || removeRecords.length || updateRecords.length || body.pendingRecords.length) {
-                  this.tableLoading = true;
+                  reactData.tableLoading = true;
                   return Promise.resolve((beforeSave || ajaxMethods)(...applyArgs)).then(rest => {
-                    this.tableLoading = false;
+                    reactData.tableLoading = false;
                     $xeTable.clearPendingRow();
                     if (isRespMsg) {
                       // 检测弹窗模块
@@ -1208,14 +991,14 @@ var _default = exports.default = {
                         (0, _log.errLog)('vxe.error.reqModule', ['Modal']);
                       }
                       _ui.VxeUI.modal.message({
-                        content: this.getRespMsg(rest, 'vxe.grid.saveSuccess'),
+                        content: $xeGrid.getRespMsg(rest, 'vxe.grid.saveSuccess'),
                         status: 'success'
                       });
                     }
                     if (afterSave) {
                       afterSave(...applyArgs);
                     } else {
-                      this.commitProxy('query');
+                      $xeGrid.commitProxy('query');
                     }
                     if (saveSuccessMethods) {
                       saveSuccessMethods(Object.assign(Object.assign({}, commitParams), {
@@ -1226,7 +1009,7 @@ var _default = exports.default = {
                       status: true
                     };
                   }).catch(rest => {
-                    this.tableLoading = false;
+                    reactData.tableLoading = false;
                     if (isRespMsg) {
                       // 检测弹窗模块
                       if (!_ui.VxeUI.modal) {
@@ -1234,7 +1017,7 @@ var _default = exports.default = {
                       }
                       _ui.VxeUI.modal.message({
                         id: code,
-                        content: this.getRespMsg(rest, 'vxe.grid.operError'),
+                        content: $xeGrid.getRespMsg(rest, 'vxe.grid.operError'),
                         status: 'error'
                       });
                     }
@@ -1274,7 +1057,7 @@ var _default = exports.default = {
                 gCommandOpts.commandMethod({
                   code,
                   button,
-                  $grid: this,
+                  $grid: $xeGrid,
                   $table: $xeTable
                 }, ...args);
               } else {
@@ -1283,66 +1066,34 @@ var _default = exports.default = {
             }
           }
       }
-      return this.$nextTick();
-    },
-    getRespMsg(rest, defaultMsg) {
-      const {
-        proxyOpts
-      } = this;
-      const resConfigs = proxyOpts.response || proxyOpts.props || {};
-      let msg;
-      if (rest && resConfigs.message) {
-        msg = _xeUtils.default.get(rest, resConfigs.message);
-      }
-      return msg || getI18n(defaultMsg);
-    },
-    handleDeleteRow(code, alertKey, callback) {
-      const selectRecords = this.getCheckboxRecords();
-      if (this.isActiveMsg) {
-        if (selectRecords.length) {
-          return _ui.VxeUI.modal.confirm({
-            id: `cfm_${code}`,
-            content: getI18n(alertKey),
-            escClosable: true
-          }).then(type => {
-            if (type === 'confirm') {
-              return callback();
-            }
-          });
-        } else {
-          // 检测弹窗模块
-          if (!_ui.VxeUI.modal) {
-            (0, _log.errLog)('vxe.error.reqModule', ['Modal']);
-          }
-          _ui.VxeUI.modal.message({
-            id: `msg_${code}`,
-            content: getI18n('vxe.grid.selectOneRecord'),
-            status: 'warning'
-          });
-        }
-      } else {
-        if (selectRecords.length) {
-          callback();
-        }
-      }
-      return Promise.resolve();
+      return $xeGrid.$nextTick();
     },
     getFormData() {
+      const $xeGrid = this;
+      const props = $xeGrid;
+      const reactData = $xeGrid.reactData;
+      const {
+        proxyConfig
+      } = props;
       const {
-        proxyConfig,
-        proxyOpts,
-        formOpts,
         formData
-      } = this;
+      } = reactData;
+      const proxyOpts = $xeGrid.computeProxyOpts;
+      const formOpts = $xeGrid.computeFormOpts;
       return proxyConfig && (0, _utils.isEnableConf)(proxyOpts) && proxyOpts.form ? formData : formOpts.data;
     },
     getFormItems(itemIndex) {
+      const $xeGrid = this;
+      const props = $xeGrid;
+      const formOpts = $xeGrid.computeFormOpts;
       const {
-        formConfig,
-        formOpts
-      } = this;
+        formConfig
+      } = props;
+      const {
+        items
+      } = formOpts;
       const itemList = [];
-      _xeUtils.default.eachTree((0, _utils.isEnableConf)(formConfig) && formOpts.items ? formOpts.items : [], item => {
+      _xeUtils.default.eachTree(formConfig && (0, _utils.isEnableConf)(formOpts) && items ? items : [], item => {
         itemList.push(item);
       }, {
         children: 'children'
@@ -1350,210 +1101,215 @@ var _default = exports.default = {
       return _xeUtils.default.isUndefined(itemIndex) ? itemList : itemList[itemIndex];
     },
     triggerToolbarCommitEvent(params, evnt) {
+      const $xeGrid = this;
       const {
         code
       } = params;
-      return this.commitProxy(params, evnt).then(rest => {
+      return $xeGrid.commitProxy(params, evnt).then(rest => {
         if (code && rest && rest.status && ['query', 'reload', 'delete', 'save'].includes(code)) {
-          this.$emit(code === 'delete' || code === 'save' ? `proxy-${code}` : 'proxy-query', Object.assign(Object.assign({}, rest), {
-            isReload: code === 'reload',
-            $grid: this,
-            $event: evnt
-          }));
+          $xeGrid.dispatchEvent(code === 'delete' || code === 'save' ? `proxy-${code}` : 'proxy-query', Object.assign(Object.assign({}, rest), {
+            isReload: code === 'reload'
+          }), evnt);
         }
       });
     },
     triggerToolbarBtnEvent(button, evnt) {
-      this.triggerToolbarCommitEvent(button, evnt);
-      this.$emit('toolbar-button-click', {
+      const $xeGrid = this;
+      $xeGrid.triggerToolbarCommitEvent(button, evnt);
+      $xeGrid.dispatchEvent('toolbar-button-click', {
         code: button.code,
-        button,
-        $grid: this,
-        $event: evnt
-      });
+        button
+      }, evnt);
     },
     triggerToolbarTolEvent(tool, evnt) {
-      this.triggerToolbarCommitEvent(tool, evnt);
-      this.$emit('toolbar-tool-click', {
+      const $xeGrid = this;
+      $xeGrid.triggerToolbarCommitEvent(tool, evnt);
+      $xeGrid.dispatchEvent('toolbar-tool-click', {
         code: tool.code,
-        tool,
-        $grid: this,
-        $event: evnt
-      });
+        tool
+      }, evnt);
     },
-    triggerPendingEvent(code) {
+    sortChangeEvent(params) {
+      const $xeGrid = this;
+      const props = $xeGrid;
+      const reactData = $xeGrid.reactData;
+      const $xeTable = $xeGrid.$refs.refTable;
       const {
-        isActiveMsg
-      } = this;
-      const selectRecords = this.getCheckboxRecords();
-      if (selectRecords.length) {
-        this.togglePendingRow(selectRecords);
-        this.clearCheckboxRow();
-      } else {
-        if (isActiveMsg) {
-          // 检测弹窗模块
-          if (!_ui.VxeUI.modal) {
-            (0, _log.errLog)('vxe.error.reqModule', ['Modal']);
-          }
-          _ui.VxeUI.modal.message({
-            id: code,
-            content: getI18n('vxe.grid.selectOneRecord'),
-            status: 'warning'
+        proxyConfig
+      } = props;
+      const proxyOpts = $xeGrid.computeProxyOpts;
+      const sortOpts = $xeTable.computeSortOpts;
+      // 如果是服务端排序
+      if (sortOpts.remote) {
+        reactData.sortData = params.sortList;
+        if (proxyConfig && (0, _utils.isEnableConf)(proxyOpts)) {
+          reactData.tablePage.currentPage = 1;
+          $xeGrid.commitProxy('query').then(rest => {
+            $xeGrid.dispatchEvent('proxy-query', rest, params.$event);
           });
         }
       }
+      $xeGrid.dispatchEvent('sort-change', params, params.$event);
     },
-    sortChangeEvent(params) {
+    pageChangeEvent(params) {
+      const $xeGrid = this;
+      const props = $xeGrid;
+      const reactData = $xeGrid.reactData;
+      const {
+        proxyConfig
+      } = props;
       const {
-        $table,
-        column,
-        sortList
+        tablePage
+      } = reactData;
+      const {
+        $event,
+        currentPage,
+        pageSize
       } = params;
-      const isRemote = _xeUtils.default.isBoolean(column.remoteSort) ? column.remoteSort : $table.sortOpts.remote;
-      // 如果是服务端排序
-      if (isRemote) {
-        this.sortData = sortList;
-        if (this.proxyConfig) {
-          this.tablePage.currentPage = 1;
-          this.commitProxy('query').then(rest => {
-            this.$emit('proxy-query', Object.assign(Object.assign({}, rest), {
-              $grid: this,
-              $event: params.$event
-            }));
-          });
-        }
+      const proxyOpts = $xeGrid.computeProxyOpts;
+      tablePage.currentPage = currentPage;
+      tablePage.pageSize = pageSize;
+      $xeGrid.dispatchEvent('page-change', params, $event);
+      if (proxyConfig && (0, _utils.isEnableConf)(proxyOpts)) {
+        $xeGrid.commitProxy('query').then(rest => {
+          $xeGrid.dispatchEvent('proxy-query', rest, $event);
+        });
       }
-      this.$emit('sort-change', Object.assign({
-        $grid: this
-      }, params));
     },
     filterChangeEvent(params) {
+      const $xeGrid = this;
+      const props = $xeGrid;
+      const reactData = $xeGrid.reactData;
+      const $xeTable = $xeGrid.$refs.refTable;
       const {
-        $table,
-        filterList
-      } = params;
+        proxyConfig
+      } = props;
+      const proxyOpts = $xeGrid.computeProxyOpts;
+      const filterOpts = $xeTable.computeFilterOpts;
       // 如果是服务端过滤
-      if ($table.filterOpts.remote) {
-        this.filterData = filterList;
-        if (this.proxyConfig) {
-          this.tablePage.currentPage = 1;
-          this.commitProxy('query').then(rest => {
-            this.$emit('proxy-query', Object.assign(Object.assign({}, rest), {
-              $grid: this,
-              $event: params.$event
-            }));
+      if (filterOpts.remote) {
+        reactData.filterData = params.filterList;
+        if (proxyConfig && (0, _utils.isEnableConf)(proxyOpts)) {
+          reactData.tablePage.currentPage = 1;
+          $xeGrid.commitProxy('query').then(rest => {
+            $xeGrid.dispatchEvent('proxy-query', rest, params.$event);
           });
         }
       }
-      this.$emit('filter-change', Object.assign({
-        $grid: this
-      }, params));
+      $xeGrid.dispatchEvent('filter-change', params, params.$event);
     },
-    submitEvent(params) {
+    submitFormEvent(params) {
       const $xeGrid = this;
-      const reactData = $xeGrid;
+      const props = $xeGrid;
+      const reactData = $xeGrid.reactData;
       const {
         proxyConfig
-      } = this;
+      } = props;
+      const proxyOpts = $xeGrid.computeProxyOpts;
       if (reactData.tableLoading) {
         return;
       }
-      if (proxyConfig) {
-        this.commitProxy('reload').then(rest => {
-          this.$emit('proxy-query', Object.assign(Object.assign({}, rest), {
-            isReload: true,
-            $grid: this,
-            $event: params.$event
-          }));
+      if (proxyConfig && (0, _utils.isEnableConf)(proxyOpts)) {
+        $xeGrid.commitProxy('reload').then(rest => {
+          $xeGrid.dispatchEvent('proxy-query', Object.assign(Object.assign({}, rest), {
+            isReload: true
+          }), params.$event);
         });
       }
-      this.$emit('form-submit', Object.assign({
-        $grid: this
-      }, params));
+      $xeGrid.dispatchEvent('form-submit', params, params.$event);
     },
-    resetEvent(params) {
+    resetFormEvent(params) {
+      const $xeGrid = this;
+      const props = $xeGrid;
+      const $xeTable = $xeGrid.$refs.refTable;
       const {
         proxyConfig
-      } = this;
-      const $xeTable = this.$refs.xTable;
-      if (proxyConfig) {
+      } = props;
+      const {
+        $event
+      } = params;
+      const proxyOpts = $xeGrid.computeProxyOpts;
+      if (proxyConfig && (0, _utils.isEnableConf)(proxyOpts)) {
         $xeTable.clearScroll();
-        this.commitProxy('reload').then(rest => {
-          this.$emit('proxy-query', Object.assign(Object.assign({}, rest), {
-            isReload: true,
-            $grid: this,
-            $event: params.$event
-          }));
+        $xeGrid.commitProxy('reload').then(rest => {
+          $xeGrid.dispatchEvent('proxy-query', Object.assign(Object.assign({}, rest), {
+            isReload: true
+          }), $event);
         });
       }
-      this.$emit('form-reset', Object.assign({
-        $grid: this
-      }, params));
+      $xeGrid.dispatchEvent('form-reset', params, $event);
     },
     submitInvalidEvent(params) {
-      this.$emit('form-submit-invalid', Object.assign({
-        $grid: this
-      }, params));
+      const $xeGrid = this;
+      $xeGrid.dispatchEvent('form-submit-invalid', params, params.$event);
     },
     collapseEvent(params) {
-      this.$nextTick(() => this.recalculate(true));
-      this.$emit('form-toggle-collapse', Object.assign({
-        $grid: this
-      }, params));
-      this.$emit('form-collapse', Object.assign({
-        $grid: this
-      }, params));
+      const $xeGrid = this;
+      const {
+        $event
+      } = params;
+      $xeGrid.dispatchEvent('form-toggle-collapse', params, $event);
+      $xeGrid.dispatchEvent('form-collapse', params, $event);
     },
     triggerZoomEvent(evnt) {
-      this.zoom();
-      this.$emit('zoom', {
-        $grid: this,
-        type: this.isZMax ? 'max' : 'revert',
-        $event: evnt
-      });
+      const $xeGrid = this;
+      const reactData = $xeGrid.reactData;
+      $xeGrid.zoom();
+      $xeGrid.dispatchEvent('zoom', {
+        type: reactData.isZMax ? 'max' : 'revert'
+      }, evnt);
     },
     zoom() {
-      return this[this.isZMax ? 'revert' : 'maximize']();
+      const $xeGrid = this;
+      const reactData = $xeGrid.reactData;
+      return $xeGrid[reactData.isZMax ? 'revert' : 'maximize']();
     },
     isMaximized() {
-      return this.isZMax;
+      const $xeGrid = this;
+      const reactData = $xeGrid.reactData;
+      return reactData.isZMax;
     },
     maximize() {
-      return this.handleZoom(true);
+      const $xeGrid = this;
+      return $xeGrid.handleZoom(true);
     },
     revert() {
-      return this.handleZoom();
+      const $xeGrid = this;
+      return $xeGrid.handleZoom();
     },
     handleZoom(isMax) {
+      const $xeGrid = this;
+      const reactData = $xeGrid.reactData;
       const {
         isZMax
-      } = this;
+      } = reactData;
       if (isMax ? !isZMax : isZMax) {
-        this.isZMax = !isZMax;
-        if (this.tZindex < (0, _utils.getLastZIndex)()) {
-          this.tZindex = (0, _utils.nextZIndex)();
+        reactData.isZMax = !isZMax;
+        if (reactData.tZindex < (0, _utils.getLastZIndex)()) {
+          reactData.tZindex = (0, _utils.nextZIndex)();
         }
       }
-      return this.$nextTick().then(() => this.recalculate(true)).then(() => {
-        setTimeout(() => this.recalculate(true), 15);
-        return this.isZMax;
+      return $xeGrid.$nextTick().then(() => $xeGrid.recalculate(true)).then(() => {
+        setTimeout(() => $xeGrid.recalculate(true), 15);
+        return reactData.isZMax;
       });
     },
     getProxyInfo() {
       const $xeGrid = this;
-      const $xeTable = $xeGrid.$refs.xTable;
-      const {
-        sortData,
-        proxyConfig
-      } = this;
-      if (proxyConfig) {
+      const props = $xeGrid;
+      const $xeTable = $xeGrid.$refs.refTable;
+      const reactData = $xeGrid.reactData;
+      if (props.proxyConfig) {
+        const {
+          sortData
+        } = reactData;
         return {
           data: $xeTable ? $xeTable.getFullData() : [],
-          filter: this.filterData,
-          form: this.getFormData(),
+          filter: reactData.filterData,
+          form: $xeGrid.getFormData(),
           sort: sortData.length ? sortData[0] : {},
           sorts: sortData,
-          pager: this.tablePage,
+          pager: reactData.tablePage,
           pendingRecords: $xeTable ? $xeTable.getPendingRecords() : []
         };
       }
@@ -1561,15 +1317,13 @@ var _default = exports.default = {
     },
     loadColumn(columns) {
       const $xeGrid = this;
-      const $xeTable = $xeGrid.$refs.xTable;
-      const {
-        $scopedSlots
-      } = this;
+      const slots = $xeGrid.$scopedSlots;
+      const $xeTable = $xeGrid.$refs.refTable;
       _xeUtils.default.eachTree(columns, column => {
         if (column.slots) {
           _xeUtils.default.each(column.slots, func => {
             if (!_xeUtils.default.isFunction(func)) {
-              if (!$scopedSlots[func]) {
+              if (!slots[func]) {
                 (0, _log.errLog)('vxe.error.notSlot', [func]);
               }
             }
@@ -1582,6 +1336,413 @@ var _default = exports.default = {
       const $xeGrid = this;
       $xeGrid.clearAll();
       return $xeGrid.loadColumn(columns);
+    },
+    getConfigSlot(slotConfigs) {
+      const $xeGrid = this;
+      const slots = $xeGrid.$scopedSlots;
+      const slotConf = {};
+      _xeUtils.default.objectMap(slotConfigs, (slotFunc, slotKey) => {
+        if (slotFunc) {
+          if (_xeUtils.default.isString(slotFunc)) {
+            if (slots[slotFunc]) {
+              slotConf[slotKey] = slots[slotFunc];
+            } else {
+              (0, _log.errLog)('vxe.error.notSlot', [slotFunc]);
+            }
+          } else {
+            slotConf[slotKey] = slotFunc;
+          }
+        }
+      });
+      return slotConf;
+    },
+    getToolbarSlots() {
+      const $xeGrid = this;
+      const slots = $xeGrid.$scopedSlots;
+      const toolbarOpts = $xeGrid.computeToolbarOpts;
+      const toolbarOptSlots = toolbarOpts.slots;
+      const toolbarSlots = {};
+      if (slots.buttons && (!toolbarOptSlots || toolbarOptSlots.buttons !== 'buttons')) {
+        (0, _log.warnLog)('vxe.error.reqProp', ['toolbar-config.slots.buttons']);
+      }
+      if (slots.tools && (!toolbarOptSlots || toolbarOptSlots.tools !== 'tools')) {
+        (0, _log.warnLog)('vxe.error.reqProp', ['toolbar-config.slots.tools']);
+      }
+      if (toolbarOptSlots) {
+        const buttonsSlot = $xeGrid.getFuncSlot(toolbarOptSlots, 'buttons');
+        const buttonPrefixSlot = $xeGrid.getFuncSlot(toolbarOptSlots, 'buttonPrefix');
+        const buttonSuffixSlot = $xeGrid.getFuncSlot(toolbarOptSlots, 'buttonSuffix');
+        const toolsSlot = $xeGrid.getFuncSlot(toolbarOptSlots, 'tools');
+        const toolPrefixSlot = $xeGrid.getFuncSlot(toolbarOptSlots, 'toolPrefix');
+        const toolSuffixSlot = $xeGrid.getFuncSlot(toolbarOptSlots, 'toolSuffix');
+        if (buttonsSlot) {
+          toolbarSlots.buttons = buttonsSlot;
+        }
+        if (buttonPrefixSlot) {
+          toolbarSlots.buttonPrefix = buttonPrefixSlot;
+        }
+        if (buttonSuffixSlot) {
+          toolbarSlots.buttonSuffix = buttonSuffixSlot;
+        }
+        if (toolsSlot) {
+          toolbarSlots.tools = toolsSlot;
+        }
+        if (toolPrefixSlot) {
+          toolbarSlots.toolPrefix = toolPrefixSlot;
+        }
+        if (toolSuffixSlot) {
+          toolbarSlots.toolSuffix = toolSuffixSlot;
+        }
+      }
+      return toolbarSlots;
+    },
+    getFuncSlot(optSlots, slotKey) {
+      const $xeGrid = this;
+      const slots = $xeGrid.$scopedSlots;
+      const funcSlot = optSlots[slotKey];
+      if (funcSlot) {
+        if (_xeUtils.default.isString(funcSlot)) {
+          if (slots[funcSlot]) {
+            return slots[funcSlot];
+          } else {
+            (0, _log.errLog)('vxe.error.notSlot', [funcSlot]);
+          }
+        } else {
+          return funcSlot;
+        }
+      }
+      return null;
+    },
+    //
+    // Render
+    //
+    renderDefaultForm(h) {
+      const VxeUIFormComponent = _ui.VxeUI.getComponent('VxeForm');
+      const $xeGrid = this;
+      const props = $xeGrid;
+      const slots = $xeGrid.$scopedSlots;
+      const reactData = $xeGrid.reactData;
+      const {
+        proxyConfig,
+        formConfig
+      } = props;
+      const {
+        formData
+      } = reactData;
+      const proxyOpts = $xeGrid.computeProxyOpts;
+      const formOpts = $xeGrid.computeFormOpts;
+      if ((0, _utils.isEnableConf)(formConfig) && formOpts.items && formOpts.items.length) {
+        const formSlots = {};
+        if (!formOpts.inited) {
+          formOpts.inited = true;
+          const beforeItem = proxyOpts.beforeItem;
+          if (proxyOpts && beforeItem) {
+            formOpts.items.forEach(item => {
+              beforeItem.call($xeGrid, {
+                $grid: $xeGrid,
+                item
+              });
+            });
+          }
+        }
+        // 处理插槽
+        formOpts.items.forEach(item => {
+          _xeUtils.default.each(item.slots, func => {
+            if (!_xeUtils.default.isFunction(func)) {
+              if (slots[func]) {
+                formSlots[func] = slots[func];
+              }
+            }
+          });
+        });
+        return [VxeUIFormComponent ? h(VxeUIFormComponent, {
+          props: Object.assign({}, formOpts, {
+            data: proxyConfig && proxyOpts.form ? formData : formOpts.data
+          }),
+          on: {
+            submit: $xeGrid.submitFormEvent,
+            reset: $xeGrid.resetFormEvent,
+            collapse: $xeGrid.collapseEvent,
+            'submit-invalid': $xeGrid.submitInvalidEvent
+          },
+          scopedSlots: formSlots
+        }) : renderEmptyElement($xeGrid)];
+      }
+      return [];
+    },
+    renderForm(h) {
+      const $xeGrid = this;
+      const props = $xeGrid;
+      const slots = $xeGrid.$scopedSlots;
+      const {
+        formConfig
+      } = props;
+      const formSlot = slots.form;
+      const hasForm = !!(formSlot || (0, _utils.isEnableConf)(formConfig));
+      if (hasForm) {
+        return h('div', {
+          key: 'form',
+          ref: 'refFormWrapper',
+          class: 'vxe-grid--form-wrapper'
+        }, formSlot ? formSlot.call($xeGrid, {
+          $grid: $xeGrid
+        }) : $xeGrid.renderDefaultForm(h));
+      }
+      return renderEmptyElement($xeGrid);
+    },
+    renderToolbar(h) {
+      const $xeGrid = this;
+      const props = $xeGrid;
+      const slots = $xeGrid.$scopedSlots;
+      const {
+        toolbarConfig
+      } = props;
+      const toolbarSlot = slots.toolbar;
+      const hasToolbar = !!(toolbarSlot || (0, _utils.isEnableConf)(toolbarConfig) || toolbar);
+      const toolbarOpts = $xeGrid.computeToolbarOpts;
+      if (hasToolbar) {
+        return h('div', {
+          key: 'toolbar',
+          ref: 'refToolbarWrapper',
+          class: 'vxe-grid--toolbar-wrapper'
+        }, toolbarSlot ? toolbarSlot.call($xeGrid, {
+          $grid: $xeGrid
+        }) : [h(_toolbar.default, {
+          props: Object.assign({}, toolbarOpts, {
+            slots: undefined
+          }),
+          ref: 'xToolbar',
+          scopedSlots: $xeGrid.getToolbarSlots()
+        })]);
+      }
+      return renderEmptyElement($xeGrid);
+    },
+    renderTop(h) {
+      const $xeGrid = this;
+      const slots = $xeGrid.$scopedSlots;
+      const topSlot = slots.top;
+      return topSlot ? h('div', {
+        key: 'top',
+        ref: 'refTopWrapper',
+        class: 'vxe-grid--top-wrapper'
+      }, topSlot.call($xeGrid, {
+        $grid: $xeGrid
+      })) : renderEmptyElement($xeGrid);
+    },
+    renderTableLeft(h) {
+      const $xeGrid = this;
+      const slots = $xeGrid.$scopedSlots;
+      const leftSlot = slots.left;
+      if (leftSlot) {
+        return h('div', {
+          class: 'vxe-grid--left-wrapper'
+        }, leftSlot({
+          $grid: $xeGrid
+        }));
+      }
+      return renderEmptyElement($xeGrid);
+    },
+    renderTableRight(h) {
+      const $xeGrid = this;
+      const slots = $xeGrid.$scopedSlots;
+      const rightSlot = slots.right;
+      if (rightSlot) {
+        return h('div', {
+          class: 'vxe-grid--right-wrapper'
+        }, rightSlot({
+          $grid: $xeGrid
+        }));
+      }
+      return renderEmptyElement($xeGrid);
+    },
+    renderTable(h) {
+      const $xeGrid = this;
+      const slots = $xeGrid.$scopedSlots;
+      const tableProps = $xeGrid.computeTableProps;
+      return h('div', {
+        class: 'vxe-grid--table-wrapper'
+      }, [h(_table.default, {
+        key: 'table',
+        props: tableProps,
+        on: getTableOns($xeGrid),
+        scopedSlots: slots,
+        ref: 'refTable'
+      })]);
+    },
+    renderBottom(h) {
+      const $xeGrid = this;
+      const slots = $xeGrid.$scopedSlots;
+      const bottomSlot = slots.bottom;
+      return bottomSlot ? h('div', {
+        key: 'bottom',
+        ref: 'refBottomWrapper',
+        class: 'vxe-grid--bottom-wrapper'
+      }, bottomSlot.call($xeGrid, {
+        $grid: $xeGrid
+      })) : renderEmptyElement($xeGrid);
+    },
+    renderPager(h) {
+      const VxeUIPagerComponent = _ui.VxeUI.getComponent('VxePager');
+      const $xeGrid = this;
+      const props = $xeGrid;
+      const slots = $xeGrid.$scopedSlots;
+      const reactData = $xeGrid.reactData;
+      const {
+        proxyConfig,
+        pagerConfig
+      } = props;
+      const proxyOpts = $xeGrid.computeProxyOpts;
+      const pagerOpts = $xeGrid.computePagerOpts;
+      const pagerSlot = slots.pager;
+      if (pagerConfig && (0, _utils.isEnableConf)(pagerOpts) || slots.pager) {
+        return h('div', {
+          ref: 'refPagerWrapper',
+          key: 'pager',
+          class: 'vxe-grid--pager-wrapper'
+        }, pagerSlot ? pagerSlot.call($xeGrid, {
+          $grid: $xeGrid
+        }) : [VxeUIPagerComponent ? h(VxeUIPagerComponent, {
+          ref: 'refPager',
+          props: Object.assign(Object.assign({}, pagerOpts), proxyConfig && (0, _utils.isEnableConf)(proxyOpts) ? reactData.tablePage : {}),
+          on: {
+            'page-change': $xeGrid.pageChangeEvent
+          },
+          scopedSlots: $xeGrid.getConfigSlot(pagerOpts.slots)
+        }) : renderEmptyElement($xeGrid)]);
+      }
+      return renderEmptyElement($xeGrid);
+    },
+    renderChildLayout(h, layoutKeys) {
+      const $xeGrid = this;
+      const childVNs = [];
+      layoutKeys.forEach(key => {
+        switch (key) {
+          case 'Form':
+            childVNs.push($xeGrid.renderForm(h));
+            break;
+          case 'Toolbar':
+            childVNs.push($xeGrid.renderToolbar(h));
+            break;
+          case 'Top':
+            childVNs.push($xeGrid.renderTop(h));
+            break;
+          case 'Table':
+            childVNs.push(h('div', {
+              key: 'table',
+              class: 'vxe-grid--table-container'
+            }, [$xeGrid.renderTableLeft(h), $xeGrid.renderTable(h), $xeGrid.renderTableRight(h)]));
+            break;
+          case 'Bottom':
+            childVNs.push($xeGrid.renderBottom(h));
+            break;
+          case 'Pager':
+            childVNs.push($xeGrid.renderPager(h));
+            break;
+          default:
+            (0, _log.errLog)('vxe.error.notProp', [`layouts -> ${key}`]);
+            break;
+        }
+      });
+      return childVNs;
+    },
+    renderLayout(h) {
+      const $xeGrid = this;
+      const slots = $xeGrid.$scopedSlots;
+      const currLayoutConf = $xeGrid.computeCurrLayoutConf;
+      const {
+        headKeys,
+        bodyKeys,
+        footKeys
+      } = currLayoutConf;
+      const asideLeftSlot = slots.asideLeft || slots['aside-left'];
+      const asideRightSlot = slots.asideRight || slots['aside-right'];
+      return [h('div', {
+        class: 'vxe-grid--layout-header-wrapper'
+      }, $xeGrid.renderChildLayout(h, headKeys)), h('div', {
+        class: 'vxe-grid--layout-body-wrapper'
+      }, [asideLeftSlot ? h('div', {
+        class: 'vxe-grid--layout-aside-left-wrapper'
+      }, asideLeftSlot({})) : renderEmptyElement($xeGrid), h('div', {
+        class: 'vxe-grid--layout-body-content-wrapper'
+      }, $xeGrid.renderChildLayout(h, bodyKeys)), asideRightSlot ? h('div', {
+        class: 'vxe-grid--layout-aside-right-wrapper'
+      }, asideRightSlot({})) : renderEmptyElement($xeGrid)]), h('div', {
+        class: 'vxe-grid--layout-footer-wrapper'
+      }, $xeGrid.renderChildLayout(h, footKeys))];
+    },
+    renderVN(h) {
+      const $xeGrid = this;
+      const props = $xeGrid;
+      const reactData = $xeGrid.reactData;
+      const vSize = $xeGrid.computeSize;
+      const styles = $xeGrid.computeStyles;
+      const isLoading = $xeGrid.computeIsLoading;
+      return h('div', {
+        ref: 'refElem',
+        class: ['vxe-grid', {
+          [`size--${vSize}`]: vSize,
+          'is--animat': !!props.animat,
+          'is--round': props.round,
+          'is--maximize': reactData.isZMax,
+          'is--loading': isLoading
+        }],
+        style: styles
+      }, $xeGrid.renderLayout(h));
+    }
+  }),
+  created() {
+    // 使用已安装的组件，如果未安装则不渲染
+    const VxeUIFormComponent = _ui.VxeUI.getComponent('VxeForm');
+    const VxeUIPagerComponent = _ui.VxeUI.getComponent('VxePager');
+    const $xeGrid = this;
+    const props = $xeGrid;
+    const proxyOpts = $xeGrid.computeProxyOpts;
+    // const { data, formOpts, proxyOpts, proxyConfig } = this
+    // if (proxyConfig && (data || (proxyOpts.form && formOpts.data))) {
+    //   errLog('vxe.error.errConflicts', ['grid.data', 'grid.proxy-config'])
+    // }
+    if (props.toolbar) {
+      (0, _log.errLog)('vxe.error.delProp', ['grid.toolbar', 'grid.toolbar-config']);
+    }
+    if (props.toolbarConfig && !_xeUtils.default.isObject(props.toolbarConfig)) {
+      (0, _log.errLog)('vxe.error.errProp', [`grid.toolbar-config=${props.toolbarConfig}`, 'grid.toolbar-config={}']);
+    }
+    if (proxyOpts.props) {
+      (0, _log.warnLog)('vxe.error.delProp', ['proxy-config.props', 'proxy-config.response']);
+    }
+    $xeGrid.$nextTick(() => {
+      if (props.formConfig) {
+        if (!VxeUIFormComponent) {
+          (0, _log.errLog)('vxe.error.reqComp', ['vxe-form']);
+        }
+      }
+      if (props.pagerConfig) {
+        if (!VxeUIPagerComponent) {
+          (0, _log.errLog)('vxe.error.reqComp', ['vxe-pager']);
+        }
+      }
+    });
+    $xeGrid.initPages();
+    globalEvents.on($xeGrid, 'keydown', $xeGrid.handleGlobalKeydownEvent);
+  },
+  mounted() {
+    const $xeGrid = this;
+    const props = $xeGrid;
+    const {
+      columns
+    } = props;
+    if (columns && columns.length) {
+      $xeGrid.loadColumn(columns);
     }
-  })
-};
+    $xeGrid.initToolbar();
+    $xeGrid.initProxy();
+  },
+  destroyed() {
+    const $xeGrid = this;
+    globalEvents.off($xeGrid, 'keydown');
+  },
+  render(h) {
+    return this.renderVN(h);
+  }
+});
+/* define-vxe-component end */