spreadjs-vue 渲染不了异步返回的数据。

收藏

在 vue 组件中的跟数据中定义一个变量，在异步ajax方法中将返回的数据赋值给根数据的一个变量，
再用属性绑定给worksheet指定dataSource,数据显示不出来。
vue 版本和 spreadjs 版本分别如下。
"vue": "^2.5.2","@grapecity/spread-sheets-vue": "^11.2.5",

附代码：
// template 代码
<gc-worksheet :dataSource="testData">

// 组件根数据
testData:[]

async getData () {
  const { data:res } = await this.$http.get('orguser/org/v1.0/list?status=CONFIRMED')
  console.log(res,'getData-res')
  if(res.status !== 1000000) return this.$message.error(res.message)
  this.$message.success(res.message)
  this.testData = res.data
  console.log(this.testData,'this.testData')
}

yachu · yachu

<gc-worksheet ref="excelTest">

this.$refs.excelTest.sheet.setDataSource(res.data)

这样写倒是能出数据，但这种方式明显有点问题啊！不方便处理每一列的数据了。

Clark.Pan · Clark.Pan

异步的问题说明时VUE在加载模板设置绑定时您这边还没有取数据，或者还没有取到。testData拿的就是空。保证的做法是在异步的回调中去设置绑定关系，也就是在回调中去设置setDataSource，而不是在模板template中。
怎么不方便处理每一列数据，请举一些例子

yachu · yachu

1.那我给每一列对应的字段怎么设置别名，比如sex显示成性别，怎么去单独处理每一列的数据，比如date字段是2018/9/29 15:13:02，显示成2018-09-29，怎么做升序降序之类的？
2.而且使用组件引用设置数据源就不需要gc-column这个组件了吧？
3.还有为什么使用template设置数据源，组件根数据为空，在异步中去赋值，这种方式gc-worksheet就检测不到testData的数据变化呢？

yachu · yachu

ClarkPan 发表于 2018-9-28 18:06
异步的问题说明时VUE在加载模板设置绑定时您这边还没有取数据，或者还没有取到。testData拿的就是空。保证 ...

1.那我给每一列对应的字段怎么设置别名，比如sex显示成性别，怎么去单独处理每一列的数据，比如date字段是2018/9/29 15:13:02，显示成2018-09-29，怎么做升序降序之类的？
2.而且使用组件引用设置数据源就不需要gc-column这个组件了吧？
3.还有为什么使用template设置数据源，组件根数据为空，在异步中去赋值，这种方式gc-worksheet就检测不到testData的数据变化呢？

Clark.Pan · Clark.Pan

因为渲染template的时候你才异步去取，而异步的情况下代码执行不会去等待你后端的执行结果回来，而是直接去拿testData继续向下执行，而目前testData就是空因为还没取回来。那么渲染当然是空了。
您的这种情况本身就不适合用GC-Column进行绑定。要用老办法
在workbookInitialized的回调中去用js方式的接口去绑定数据源
参考附件demo，sheet.setDataSource(dataSource);放在异步的方法回调用去执行就没问题了。

yachu · yachu

ClarkPan 发表于 2018-9-29 18:18
因为渲染template的时候你才异步去取，而异步的情况下代码执行不会去等待你后端的执行结果回来，而是直接去 ...

<gc-worksheet ref="excelTest">

this.$refs.excelTest.sheet.setDataSource(res.data)

我是使用组件引用的方式解决的。我比较好奇为什么 spreadjs 提供的这个 vue 组件不能检测数据的变化从而更新页面？

Clark.Pan · Clark.Pan

双向绑定的机制也是首先知道您的绑定关系是什么，然后再进行更新。但像您这种情况，一开始是个[]，后面有值了，但是那些值哪个应该绑定到哪一列，这样的绑定关系压根没有，怎么进行绑定。

xylxt · xylxt

ClarkPan 发表于 2018-9-30 11:42
双向绑定的机制也是首先知道您的绑定关系是什么，然后再进行更新。但像您这种情况，一开始是个[]，后面有值 ...

通过designer模板设置cell绑定，保存文档。
然后在workbookInitialized事件中通过fromJson加载文档，并设置data属性绑定。
可以通过data属性一次渲染单元格，并取得编辑后的数据。
但无法通过改变data属性，再次渲染单元格。

请问问题出在那，谢谢

Clark.Pan · Clark.Pan

请您直接提供一个demo,我看一下

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

[已处理] spreadjs-vue 渲染不了异步返回的数据。

21 个回复

讲师达人

悬赏达人

微信认证勋章

SpreadJS 认证

SpreadJS 高级认证

元老葡萄