js excel组件handsontable(支持vue、react、Angular)

官方文档:JavaScript Data Grid - Documentation | Handsontable

按照vue2的案例写好后,项目报错
vue2案例:Basic example - Vue 2 Data Grid | Handsontable

 ERROR  Failed to compile with 7 errors                                                                                                                                                                             16:39:40

 error  in ./node_modules/handsontable/plugins/nestedHeaders/stateManager/index.js

Module parse failed: Unexpected token (128:8)
You may need an appropriate loader to handle this file type.
|       let {
|         row,
|         ...rest
|       } = _ref;
|       return {

 @ ./node_modules/handsontable/plugins/nestedHeaders/nestedHeaders.js 13:44-69
 @ ./node_modules/handsontable/plugins/nestedHeaders/index.js
 @ ./node_modules/handsontable/plugins/index.js
 @ ./node_modules/handsontable/registry.js
 @ ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/semiconductor/views/productTrace/yieldReport/index.vue
 @ ./src/semiconductor/views/productTrace/yieldReport/index.vue
 @ ./src/semiconductor/router/index.js
 @ ./src/semiconductor/main.js
 @ multi (webpack)-dev-server/client?http://0.0.0.0:8093 webpack/hot/dev-server babel-polyfill ./src/semiconductor/main.js

 error  in ./node_modules/handsontable/editorManager.js

Module parse failed: Unexpected token (142:6)
You may need an appropriate loader to handle this file type.
|       }
|     }], {
|       ...config,
|       runOnlyIf: () => (0, _mixed.isDefined)(this.instance.getSelected())
|     });

 @ ./node_modules/handsontable/core.js 12:44-70
 @ ./node_modules/handsontable/base.js
 @ ./node_modules/@handsontable/vue/es/vue-handsontable.mjs
 @ ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/semiconductor/views/productTrace/yieldReport/index.vue
 @ ./src/semiconductor/views/productTrace/yieldReport/index.vue
 @ ./src/semiconductor/router/index.js
 @ ./src/semiconductor/main.js
 @ multi (webpack)-dev-server/client?http://0.0.0.0:8093 webpack/hot/dev-server babel-polyfill ./src/semiconductor/main.js

 error  in ./node_modules/handsontable/selection/highlight/highlight.js

Module parse failed: Unexpected token (152:8)
You may need an appropriate loader to handle this file type.
|       area = (0, _types.createHighlight)(_constants.AREA_TYPE, {
|         layerLevel,
|         ...this.options
|       });
|       this.areas.set(layerLevel, area);

 @ ./node_modules/handsontable/selection/index.js 11:40-72
 @ ./node_modules/handsontable/core.js
 @ ./node_modules/handsontable/base.js
 @ ./node_modules/@handsontable/vue/es/vue-handsontable.mjs
 @ ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/semiconductor/views/productTrace/yieldReport/index.vue
 @ ./src/semiconductor/views/productTrace/yieldReport/index.vue
 @ ./src/semiconductor/router/index.js
 @ ./src/semiconductor/main.js
 @ multi (webpack)-dev-server/client?http://0.0.0.0:8093 webpack/hot/dev-server babel-polyfill ./src/semiconductor/main.js

 error  in ./node_modules/handsontable/plugins/contextMenu/menu.js

Module parse failed: Unexpected token (248:6)
You may need an appropriate loader to handle this file type.
|     };
|     const menuContextConfig = {
|       ...config,
|       runOnlyIf: event => (0, _element.isInput)(event.target) === false || this.container.contains(event.target) === false
|     };

 @ ./node_modules/handsontable/plugins/contextMenu/contextMenu.js 10:35-52
 @ ./node_modules/handsontable/plugins/contextMenu/index.js
 @ ./node_modules/handsontable/plugins/index.js
 @ ./node_modules/handsontable/registry.js
 @ ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/semiconductor/views/productTrace/yieldReport/index.vue
 @ ./src/semiconductor/views/productTrace/yieldReport/index.vue
 @ ./src/semiconductor/router/index.js
 @ ./src/semiconductor/main.js
 @ multi (webpack)-dev-server/client?http://0.0.0.0:8093 webpack/hot/dev-server babel-polyfill ./src/semiconductor/main.js

 error  in ./node_modules/handsontable/plugins/columnSorting/columnSorting.js

Module parse failed: Unexpected token (351:8)
You may need an appropriate loader to handle this file type.
|       let {
|         column: visualColumn,
|         ...restOfProperties
|       } = _ref2;
|       return {

 @ ./node_modules/handsontable/plugins/columnSorting/index.js 4:21-47
 @ ./node_modules/handsontable/plugins/index.js
 @ ./node_modules/handsontable/registry.js
 @ ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/semiconductor/views/productTrace/yieldReport/index.vue
 @ ./src/semiconductor/views/productTrace/yieldReport/index.vue
 @ ./src/semiconductor/router/index.js
 @ ./src/semiconductor/main.js
 @ multi (webpack)-dev-server/client?http://0.0.0.0:8093 webpack/hot/dev-server babel-polyfill ./src/semiconductor/main.js

 error  in ./node_modules/handsontable/dataMap/metaManager/metaLayers/globalMeta.js

Module parse failed: Unexpected token (87:6)
You may need an appropriate loader to handle this file type.
|     (0, _object.extend)(this.meta, settings);
|     (0, _utils.extendByMetaType)(this.meta, {
|       ...settings,
|       type: (_settings$type = settings.type) !== null && _settings$type !== void 0 ? _settings$type : this.meta.type
|     }, settings);

 @ ./node_modules/handsontable/dataMap/metaManager/index.js 5:41-75
 @ ./node_modules/handsontable/dataMap/index.js
 @ ./node_modules/handsontable/base.js
 @ ./node_modules/@handsontable/vue/es/vue-handsontable.mjs
 @ ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/semiconductor/views/productTrace/yieldReport/index.vue
 @ ./src/semiconductor/views/productTrace/yieldReport/index.vue
 @ ./src/semiconductor/router/index.js
 @ ./src/semiconductor/main.js
 @ multi (webpack)-dev-server/client?http://0.0.0.0:8093 webpack/hot/dev-server babel-polyfill ./src/semiconductor/main.js

 error  in ./node_modules/handsontable/plugins/formulas/engine/settings.js

Module parse failed: Unexpected token (91:4)
You may need an appropriate loader to handle this file type.
|   const overrides = getEngineSettingsOverrides(hotSettings);
|   return {
|     ...DEFAULT_SETTINGS,
|     ...userSettings,
|     ...overrides

 @ ./node_modules/handsontable/plugins/formulas/formulas.js 14:16-44
 @ ./node_modules/handsontable/plugins/formulas/index.js
 @ ./node_modules/handsontable/plugins/index.js
 @ ./node_modules/handsontable/registry.js
 @ ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/semiconductor/views/productTrace/yieldReport/index.vue
 @ ./src/semiconductor/views/productTrace/yieldReport/index.vue
 @ ./src/semiconductor/router/index.js
 @ ./src/semiconductor/main.js
 @ multi (webpack)-dev-server/client?http://0.0.0.0:8093 webpack/hot/dev-server babel-polyfill ./src/semiconductor/main.js

WTF???
找了半天问题,没有发现原因,也没有类似问题的答案...emo...
又去找了其他excel组件,发现都不好用,回头继续尝试
最后的最后,使用老版本解决问题...我用的是12.2.0的版本,案例正常了...

你可能感兴趣的:(js excel组件handsontable(支持vue、react、Angular))