最新的Vue框架集成spreadsheets失败

收藏

使用最新vue-cli创建的工程
npm install -g @vue/cli
npm install -g @vue/cli-service-global

Vue版本号：
E:\Project\Vue>vue -V
3.4.1

vue create hello-world

按照http://help.grapecity.com/spread/SpreadSheets12/webframe.html#UsingSpread.SheetswithVue.html指导进行配置：

安装spread：
$ cd hello-world
$ npm install @grapecity/spread-sheets-vue
配置App.vue 文件：
<template>
                           <div>
                              <gc-spread-sheets
                                 :hostClass='hostClass'
                              >
                                 <gc-worksheet
                                    :dataSource="dataTable"
                                    :autoGenerateColumns = 'autoGenerateColumns'
                                 >
                                    <gc-column
                                    :width="width"
                                    :dataField="'price'"
                                    :visible = 'visible'
                                    :formatter = 'formatter'
                                    :resizable = 'resizable'
                                    ></gc-column>
      </gc-worksheet>
   </gc-spread-sheets>
                           </div>
                        </template>
                        <script>
                           import [url=]'@grapecity/spread-sheets/styles/gc.spread.sheets.excel2016colorful.css'[/url]
                           import  [url=]'@grapecity/spread-sheets-vue'[/url]
                           export default {
                              data(){
                              return {
                                 hostClass:'spread-host',
                                 autoGenerateColumns:true,
                                 width:300,
                                 visible:true,
                                 resizable:true,
                                 formatter:"$ #.00"
                              }
                              },
                              computed:{
                              dataTable(){
                                 let dataTable = [];
                                 for (let i = 0; i < 42; i++) {
                                    dataTable.push({price: i + 0.56})
                                 }
                                 return dataTable
                              }
                              }
                           }
                        </script>
                        <style scoped>
                        .spread-host {
                              width: 500px;
                              height: 600px;
                        }
                        </style>

启动web服务
cd src
vue serve --open

浏览器console报错：

vue.runtime.esm.js?e832:619 [Vue warn]: Property or method "hostClass" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.
found in
---> <App> at App.vue
   <Root>
warn @ vue.runtime.esm.js?e832:619
warnNonPresent @ vue.runtime.esm.js?e832:2014
get @ vue.runtime.esm.js?e832:2069
render @ App.vue?ada7:18
Vue._render @ vue.runtime.esm.js?e832:3535
updateComponent @ vue.runtime.esm.js?e832:4037
get @ vue.runtime.esm.js?e832:4440
Watcher @ vue.runtime.esm.js?e832:4429
mountComponent @ vue.runtime.esm.js?e832:4044
Vue.$mount @ vue.runtime.esm.js?e832:8373
init @ vue.runtime.esm.js?e832:3111
createComponent @ vue.runtime.esm.js?e832:5939
createElm @ vue.runtime.esm.js?e832:5886
patch @ vue.runtime.esm.js?e832:6477
Vue._update @ vue.runtime.esm.js?e832:3916
updateComponent @ vue.runtime.esm.js?e832:4037
get @ vue.runtime.esm.js?e832:4440
Watcher @ vue.runtime.esm.js?e832:4429
mountComponent @ vue.runtime.esm.js?e832:4044
Vue.$mount @ vue.runtime.esm.js?e832:8373
(anonymous) @ main.js?1d50:6
./main.js @ app.js:1139
__webpack_require__ @ app.js:724
fn @ app.js:101
0 @ app.js:1152
__webpack_require__ @ app.js:724
(anonymous) @ app.js:791
(anonymous) @ app.js:794
vue.runtime.esm.js?e832:619 [Vue warn]: Property or method "dataTable" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.
found in
---> <App> at App.vue
   <Root>
warn @ vue.runtime.esm.js?e832:619
warnNonPresent @ vue.runtime.esm.js?e832:2014
get @ vue.runtime.esm.js?e832:2069
render @ App.vue?ada7:24
Vue._render @ vue.runtime.esm.js?e832:3535
updateComponent @ vue.runtime.esm.js?e832:4037
get @ vue.runtime.esm.js?e832:4440
Watcher @ vue.runtime.esm.js?e832:4429
mountComponent @ vue.runtime.esm.js?e832:4044
Vue.$mount @ vue.runtime.esm.js?e832:8373
init @ vue.runtime.esm.js?e832:3111
createComponent @ vue.runtime.esm.js?e832:5939
createElm @ vue.runtime.esm.js?e832:5886
patch @ vue.runtime.esm.js?e832:6477
Vue._update @ vue.runtime.esm.js?e832:3916
updateComponent @ vue.runtime.esm.js?e832:4037
get @ vue.runtime.esm.js?e832:4440
Watcher @ vue.runtime.esm.js?e832:4429
mountComponent @ vue.runtime.esm.js?e832:4044
Vue.$mount @ vue.runtime.esm.js?e832:8373
(anonymous) @ main.js?1d50:6
./main.js @ app.js:1139
__webpack_require__ @ app.js:724
fn @ app.js:101
0 @ app.js:1152
__webpack_require__ @ app.js:724
(anonymous) @ app.js:791
(anonymous) @ app.js:794
vue.runtime.esm.js?e832:619 [Vue warn]: Property or method "autoGenerateColumns" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.
found in
---> <App> at App.vue
   <Root>
warn @ vue.runtime.esm.js?e832:619
warnNonPresent @ vue.runtime.esm.js?e832:2014
get @ vue.runtime.esm.js?e832:2069
render @ App.vue?ada7:25
Vue._render @ vue.runtime.esm.js?e832:3535
updateComponent @ vue.runtime.esm.js?e832:4037
get @ vue.runtime.esm.js?e832:4440
Watcher @ vue.runtime.esm.js?e832:4429
mountComponent @ vue.runtime.esm.js?e832:4044
Vue.$mount @ vue.runtime.esm.js?e832:8373
init @ vue.runtime.esm.js?e832:3111
createComponent @ vue.runtime.esm.js?e832:5939
createElm @ vue.runtime.esm.js?e832:5886
patch @ vue.runtime.esm.js?e832:6477
Vue._update @ vue.runtime.esm.js?e832:3916
updateComponent @ vue.runtime.esm.js?e832:4037
get @ vue.runtime.esm.js?e832:4440
Watcher @ vue.runtime.esm.js?e832:4429
mountComponent @ vue.runtime.esm.js?e832:4044
Vue.$mount @ vue.runtime.esm.js?e832:8373
(anonymous) @ main.js?1d50:6
./main.js @ app.js:1139
__webpack_require__ @ app.js:724
fn @ app.js:101
0 @ app.js:1152
__webpack_require__ @ app.js:724
(anonymous) @ app.js:791
(anonymous) @ app.js:794
vue.runtime.esm.js?e832:619 [Vue warn]: Property or method "width" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.
found in
---> <App> at App.vue
   <Root>
warn @ vue.runtime.esm.js?e832:619
warnNonPresent @ vue.runtime.esm.js?e832:2014
get @ vue.runtime.esm.js?e832:2069
render @ App.vue?ada7:31
Vue._render @ vue.runtime.esm.js?e832:3535
updateComponent @ vue.runtime.esm.js?e832:4037
get @ vue.runtime.esm.js?e832:4440
Watcher @ vue.runtime.esm.js?e832:4429
mountComponent @ vue.runtime.esm.js?e832:4044
Vue.$mount @ vue.runtime.esm.js?e832:8373
init @ vue.runtime.esm.js?e832:3111
createComponent @ vue.runtime.esm.js?e832:5939
createElm @ vue.runtime.esm.js?e832:5886
patch @ vue.runtime.esm.js?e832:6477
Vue._update @ vue.runtime.esm.js?e832:3916
updateComponent @ vue.runtime.esm.js?e832:4037
get @ vue.runtime.esm.js?e832:4440
Watcher @ vue.runtime.esm.js?e832:4429
mountComponent @ vue.runtime.esm.js?e832:4044
Vue.$mount @ vue.runtime.esm.js?e832:8373
(anonymous) @ main.js?1d50:6
./main.js @ app.js:1139
__webpack_require__ @ app.js:724
fn @ app.js:101
0 @ app.js:1152
__webpack_require__ @ app.js:724
(anonymous) @ app.js:791
(anonymous) @ app.js:794
vue.runtime.esm.js?e832:619 [Vue warn]: Property or method "visible" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.
found in
---> <App> at App.vue
   <Root>
warn @ vue.runtime.esm.js?e832:619
warnNonPresent @ vue.runtime.esm.js?e832:2014
get @ vue.runtime.esm.js?e832:2069
render @ App.vue?ada7:33
Vue._render @ vue.runtime.esm.js?e832:3535
updateComponent @ vue.runtime.esm.js?e832:4037
get @ vue.runtime.esm.js?e832:4440
Watcher @ vue.runtime.esm.js?e832:4429
mountComponent @ vue.runtime.esm.js?e832:4044
Vue.$mount @ vue.runtime.esm.js?e832:8373
init @ vue.runtime.esm.js?e832:3111
createComponent @ vue.runtime.esm.js?e832:5939
createElm @ vue.runtime.esm.js?e832:5886
patch @ vue.runtime.esm.js?e832:6477
Vue._update @ vue.runtime.esm.js?e832:3916
updateComponent @ vue.runtime.esm.js?e832:4037
get @ vue.runtime.esm.js?e832:4440
Watcher @ vue.runtime.esm.js?e832:4429
mountComponent @ vue.runtime.esm.js?e832:4044
Vue.$mount @ vue.runtime.esm.js?e832:8373
(anonymous) @ main.js?1d50:6
./main.js @ app.js:1139
__webpack_require__ @ app.js:724
fn @ app.js:101
0 @ app.js:1152
__webpack_require__ @ app.js:724
(anonymous) @ app.js:791
(anonymous) @ app.js:794
vue.runtime.esm.js?e832:619 [Vue warn]: Property or method "formatter" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.
found in
---> <App> at App.vue
   <Root>
warn @ vue.runtime.esm.js?e832:619
warnNonPresent @ vue.runtime.esm.js?e832:2014
get @ vue.runtime.esm.js?e832:2069
render @ App.vue?ada7:34
Vue._render @ vue.runtime.esm.js?e832:3535
updateComponent @ vue.runtime.esm.js?e832:4037
get @ vue.runtime.esm.js?e832:4440
Watcher @ vue.runtime.esm.js?e832:4429
mountComponent @ vue.runtime.esm.js?e832:4044
Vue.$mount @ vue.runtime.esm.js?e832:8373
init @ vue.runtime.esm.js?e832:3111
createComponent @ vue.runtime.esm.js?e832:5939
createElm @ vue.runtime.esm.js?e832:5886
patch @ vue.runtime.esm.js?e832:6477
Vue._update @ vue.runtime.esm.js?e832:3916
updateComponent @ vue.runtime.esm.js?e832:4037
get @ vue.runtime.esm.js?e832:4440
Watcher @ vue.runtime.esm.js?e832:4429
mountComponent @ vue.runtime.esm.js?e832:4044
Vue.$mount @ vue.runtime.esm.js?e832:8373
(anonymous) @ main.js?1d50:6
./main.js @ app.js:1139
__webpack_require__ @ app.js:724
fn @ app.js:101
0 @ app.js:1152
__webpack_require__ @ app.js:724
(anonymous) @ app.js:791
(anonymous) @ app.js:794
vue.runtime.esm.js?e832:619 [Vue warn]: Property or method "resizable" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.
found in
---> <App> at App.vue
   <Root>
warn @ vue.runtime.esm.js?e832:619
warnNonPresent @ vue.runtime.esm.js?e832:2014
get @ vue.runtime.esm.js?e832:2069
render @ App.vue?ada7:35
Vue._render @ vue.runtime.esm.js?e832:3535
updateComponent @ vue.runtime.esm.js?e832:4037
get @ vue.runtime.esm.js?e832:4440
Watcher @ vue.runtime.esm.js?e832:4429
mountComponent @ vue.runtime.esm.js?e832:4044
Vue.$mount @ vue.runtime.esm.js?e832:8373
init @ vue.runtime.esm.js?e832:3111
createComponent @ vue.runtime.esm.js?e832:5939
createElm @ vue.runtime.esm.js?e832:5886
patch @ vue.runtime.esm.js?e832:6477
Vue._update @ vue.runtime.esm.js?e832:3916
updateComponent @ vue.runtime.esm.js?e832:4037
get @ vue.runtime.esm.js?e832:4440
Watcher @ vue.runtime.esm.js?e832:4429
mountComponent @ vue.runtime.esm.js?e832:4044
Vue.$mount @ vue.runtime.esm.js?e832:8373
(anonymous) @ main.js?1d50:6
./main.js @ app.js:1139
__webpack_require__ @ app.js:724
fn @ app.js:101
0 @ app.js:1152
__webpack_require__ @ app.js:724
(anonymous) @ app.js:791
(anonymous) @ app.js:794
vue.runtime.esm.js?e832:619 [Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.
found in
---> <GcSpreadSheets>
   <App> at App.vue
      <Root>
warn @ vue.runtime.esm.js?e832:619
mountComponent @ vue.runtime.esm.js?e832:4000
Vue.$mount @ vue.runtime.esm.js?e832:8373
init @ vue.runtime.esm.js?e832:3111
createComponent @ vue.runtime.esm.js?e832:5939
createElm @ vue.runtime.esm.js?e832:5886
createChildren @ vue.runtime.esm.js?e832:6014
createElm @ vue.runtime.esm.js?e832:5915
createChildren @ vue.runtime.esm.js?e832:6014
createElm @ vue.runtime.esm.js?e832:5915
patch @ vue.runtime.esm.js?e832:6438
Vue._update @ vue.runtime.esm.js?e832:3916
updateComponent @ vue.runtime.esm.js?e832:4037
get @ vue.runtime.esm.js?e832:4440
Watcher @ vue.runtime.esm.js?e832:4429
mountComponent @ vue.runtime.esm.js?e832:4044
Vue.$mount @ vue.runtime.esm.js?e832:8373
init @ vue.runtime.esm.js?e832:3111
createComponent @ vue.runtime.esm.js?e832:5939
createElm @ vue.runtime.esm.js?e832:5886
patch @ vue.runtime.esm.js?e832:6477
Vue._update @ vue.runtime.esm.js?e832:3916
updateComponent @ vue.runtime.esm.js?e832:4037
get @ vue.runtime.esm.js?e832:4440
Watcher @ vue.runtime.esm.js?e832:4429
mountComponent @ vue.runtime.esm.js?e832:4044
Vue.$mount @ vue.runtime.esm.js?e832:8373
(anonymous) @ main.js?1d50:6
./main.js @ app.js:1139
__webpack_require__ @ app.js:724
fn @ app.js:101
0 @ app.js:1152
__webpack_require__ @ app.js:724
(anonymous) @ app.js:791
(anonymous) @ app.js:794
vue.runtime.esm.js?e832:619 [Vue warn]: Error in mounted hook: "TypeError: this.$el.getElementsByClassName is not a function"
found in
---> <GcSpreadSheets>
   <App> at App.vue
      <Root>
warn @ vue.runtime.esm.js?e832:619
logError @ vue.runtime.esm.js?e832:1883
globalHandleError @ vue.runtime.esm.js?e832:1878
handleError @ vue.runtime.esm.js?e832:1839
invokeWithErrorHandling @ vue.runtime.esm.js?e832:1861
callHook @ vue.runtime.esm.js?e832:4190
insert @ vue.runtime.esm.js?e832:3132
invokeInsertHook @ vue.runtime.esm.js?e832:6307
patch @ vue.runtime.esm.js?e832:6526
Vue._update @ vue.runtime.esm.js?e832:3916
updateComponent @ vue.runtime.esm.js?e832:4037
get @ vue.runtime.esm.js?e832:4440
Watcher @ vue.runtime.esm.js?e832:4429
mountComponent @ vue.runtime.esm.js?e832:4044
Vue.$mount @ vue.runtime.esm.js?e832:8373
(anonymous) @ main.js?1d50:6
./main.js @ app.js:1139
__webpack_require__ @ app.js:724
fn @ app.js:101
0 @ app.js:1152
__webpack_require__ @ app.js:724
(anonymous) @ app.js:791
(anonymous) @ app.js:794
vue.runtime.esm.js?e832:1887 TypeError: this.$el.getElementsByClassName is not a function
at VueComponent.a (gc.spread.sheets.vue.min.js?e6b0:1)
at VueComponent.a (gc.spread.sheets.vue.min.js?e6b0:1)
at invokeWithErrorHandling (vue.runtime.esm.js?e832:1854)
at callHook (vue.runtime.esm.js?e832:4190)
at Object.insert (vue.runtime.esm.js?e832:3132)
at invokeInsertHook (vue.runtime.esm.js?e832:6307)
at Vue.patch [as __patch__] (vue.runtime.esm.js?e832:6526)
at Vue._update (vue.runtime.esm.js?e832:3916)
at Vue.updateComponent (vue.runtime.esm.js?e832:4037)
at Watcher.get (vue.runtime.esm.js?e832:4440)

WangChangsong · WangChangsong

贴的错误日志太多了，关注错误日志：
webpack-internal:///../node_modules/vue/dist/vue.runtime.esm.js:1886 TypeError: this.$el.getElementsByClassName is not a function
at VueComponent.a (webpack-internal:///../node_modules/@grapecity/spread-sheets-vue/dist/gc.spread.sheets.vue.min.js:1)
at VueComponent.a (webpack-internal:///../node_modules/@grapecity/spread-sheets-vue/dist/gc.spread.sheets.vue.min.js:1)
at invokeWithErrorHandling (webpack-internal:///../node_modules/vue/dist/vue.runtime.esm.js:1853)
at callHook (webpack-internal:///../node_modules/vue/dist/vue.runtime.esm.js:4184)
at Object.insert (webpack-internal:///../node_modules/vue/dist/vue.runtime.esm.js:3129)
at invokeInsertHook (webpack-internal:///../node_modules/vue/dist/vue.runtime.esm.js:6297)
at Vue.patch [as __patch__] (webpack-internal:///../node_modules/vue/dist/vue.runtime.esm.js:6516)
at Vue._update (webpack-internal:///../node_modules/vue/dist/vue.runtime.esm.js:3910)
at Vue.updateComponent (webpack-internal:///../node_modules/vue/dist/vue.runtime.esm.js:4031)
at Watcher.get (webpack-internal:///../node_modules/vue/dist/vue.runtime.esm.js:4434)

其他的都是warn

KevinChen · KevinChen

您好，请参考此贴：

https://gcdn.grapecity.com.cn/fo ... ight=vue&page=2

		自动登录	找回密码
密码			立即注册

[已处理] 最新的Vue框架集成spreadsheets失败

2 个回复

讲师达人

悬赏达人

元老葡萄

SpreadJS 认证

SpreadJS 高级认证

微信认证勋章