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

yachu · yachu

ClarkPan 发表于 2018-10-8 08:52
请您直接提供一个demo,我看一下

什么情况？我刚刚打了好多字回复过去了，怎么一刷新都没了？

yachu · yachu

ClarkPan 发表于 2018-10-8 08:52
请您直接提供一个demo,我看一下

我的数据是需要处理的，比如设置列名，日期格式化，处理金额的数字等。有办法在设置数据源之前单独去进行列定义吗？

我的部分 vue 代码如下，单独跑不起来：
<template>
  <div>
  <gc-spread-sheets :hostClass='hostClass'>
<gc-worksheet ref="excelTest">
   <gc-column></gc-column>
</gc-worksheet>
  </gc-spread-sheets>
  </div>
</template>

<script>
import _ from 'lodash'
import '@grapecity/spread-sheets/styles/gc.spread.sheets.excel2016colorful.css'
import '@grapecity/spread-sheets-vue'
export default {
  name: 'HelloWorld',
  data () {
return {
   hostClass: 'spread-host',
   testData: [
      ]
}
  },
  created () {
this.getData()
  },
  methods: {
async getData () {
   const { data: res } = await this.$http.get('orguser/org/v1.0/list?status=CONFIRMED')
   if (res.status !== 1000000) return this.$message.error(res.message)
   this.$message.success(res.message)
   this.$refs.excelTest.sheet.setDataSource(res.data)
}
  }
}
</script>

我的数据格式，数组中的第一个对象：
{accountPermitsId: "J6714000044403"
auditDate: "2018-09-27 10:29:31"
businessEnd: "长期"
businessStart: "2006-03-04"
corpType: "LIMITED_LIABILITY"
corpTypeDesc: "有限公司"
creditCode: "G10511523000044406"
creditPeriod: "2017-07-23"
legalPerson: "邓敏"
licenseId: "91511523784729819F"
orgId: "7c378335-c40a-457d-9ea8-19290aeb8c5b"
orgName: "宜宾海丰和锐有限公司"
orgType: "INCORPORATED"
orgTypeDesc: "法人企业"
registerDate: "2006-03-04"
registeredCapital: 212832
roles: ["MERCHANT", __ob__: Observer]
rolesDesc: ["贸易商", __ob__: Observer]
status: "CONFIRMED"
statusDesc: "审核通过"}

我想要的是类似 ag-grid 的列定义方法：
var columnDefs = [
         {headerName: "#", width: 40, valueGetter: appConst.gridHelper.rowIndex, pinned: 'left'},
         {headerName: "企业名称", minWidth:240, field: "orgName", pinned: 'left',template:'<a ng-bind="data.orgName" ui-sref="home.enterpriseView({id:\'{{data.orgId}}\', type:\'auditing\' })"></a>'},
         {headerName:"审核通过时间",field:"auditDate",valueGetter: appConst.gridHelper.filter("dateOnly2"), filter: 'date', filterParams: appConst.gridHelper.dateFilterParam},
         {headerName:"成立日期",field:"registerDate",valueGetter: appConst.gridHelper.filter("dateOnly2"), filter: 'date', filterParams: appConst.gridHelper.dateFilterParam},
         {headerName:"企业法人/负责人姓名",field:"legalPerson",width: 120},
         {headerName:"经营期限(开始日期)",field:"businessStart",valueGetter: appConst.gridHelper.filter("dateOnly2"), filter: 'date', filterParams: appConst.gridHelper.dateFilterParam},
         {headerName:"经营期限(截止日期)",field:"businessEnd",valueGetter: appConst.gridHelper.filter("dateOnly2"), filter: 'date', filterParams: appConst.gridHelper.dateFilterParam},
         {headerName:"注册资本(万元)",field:"registeredCapital", valueGetter: appConst.gridHelper.filter("currency")},
         {headerName:"营业执照注册号/统一社会信用代码",field:"licenseId",},
         {headerName:"机构信用证代码",field:"creditCode"},
         {headerName:"机构信用代码证有效期",field:"creditPeriod",valueGetter: appConst.gridHelper.filter("dateOnly2"), filter: 'date', filterParams: appConst.gridHelper.dateFilterParam},
         {headerName:"开户许可证核准号",field:"accountPermitsId"},
         {headerName:"企业角色",field:"",width: 120 ,template:'<span> {{data.rolesDesc[0]}} </span>'},
         {headerName:"企业类型",field:"corpTypeDesc",width: 120},
         {headerName:"机构类型",field:"orgTypeDesc",width: 120},
         {headerName:"企业状态",field:"statusDesc"},
      ];

劳您费心啦！

yachu · yachu

xylxt 发表于 2018-10-2 15:15
通过designer模板设置cell绑定，保存文档。
然后在workbookInitialized事件中通过fromJson加载文档，并 ...

你写的我没看懂，抱歉。我要在 vue 项目中使用 spreadjs 展示数据，现在的问题是我想要在组件的根数据中定义一个变量，然后在异步返回数据中的方法给这个变量赋值，但是不行，数据渲染不出来。我找到的办法是通过组件的引用去设置 dataSource 展示数据。这样又有新的问题，因为我的数据是需要处理的，比如设置列名，日期格式化，处理金额的数字等。有办法在设置数据源之前单独去进行列定义吗？

我的部分 vue 代码如下：
<template>
  <div>
  <gc-spread-sheets :hostClass='hostClass'>
<gc-worksheet ref="excelTest">
   <gc-column></gc-column>
</gc-worksheet>
  </gc-spread-sheets>
  </div>
</template>

<script>
import _ from 'lodash'
import '@grapecity/spread-sheets/styles/gc.spread.sheets.excel2016colorful.css'
import '@grapecity/spread-sheets-vue'
export default {
  name: 'HelloWorld',
  data () {
return {
   hostClass: 'spread-host',
   testData: [
      ]
}
  },
  created () {
this.getData()
  },
  methods: {
async getData () {
   const { data: res } = await this.$http.get('orguser/org/v1.0/list?status=CONFIRMED')
   if (res.status !== 1000000) return this.$message.error(res.message)
   this.$message.success(res.message)
   this.$refs.excelTest.sheet.setDataSource(res.data)
}
  }
}
</script>

我的数据格式，数组中的第一个对象：
{accountPermitsId: "J6714000044403"
auditDate: "2018-09-27 10:29:31"
businessEnd: "长期"
businessStart: "2006-03-04"
corpType: "LIMITED_LIABILITY"
corpTypeDesc: "有限公司"
creditCode: "G10511523000044406"
creditPeriod: "2017-07-23"
legalPerson: "邓敏"
licenseId: "91511523784729819F"
orgId: "7c378335-c40a-457d-9ea8-19290aeb8c5b"
orgName: "宜宾海丰和锐有限公司"
orgType: "INCORPORATED"
orgTypeDesc: "法人企业"
registerDate: "2006-03-04"
registeredCapital: 212832
roles: ["MERCHANT", __ob__: Observer]
rolesDesc: ["贸易商", __ob__: Observer]
status: "CONFIRMED"
statusDesc: "审核通过"}

我想要的是类似 ag-grid 的列定义方法：
var columnDefs = [
         {headerName: "#", width: 40, valueGetter: appConst.gridHelper.rowIndex, pinned: 'left'},
         {headerName: "企业名称", minWidth:240, field: "orgName", pinned: 'left',template:'<a ng-bind="data.orgName" ui-sref="home.enterpriseView({id:\'{{data.orgId}}\', type:\'auditing\' })"></a>'},
         {headerName:"审核通过时间",field:"auditDate",valueGetter: appConst.gridHelper.filter("dateOnly2"), filter: 'date', filterParams: appConst.gridHelper.dateFilterParam},
         {headerName:"成立日期",field:"registerDate",valueGetter: appConst.gridHelper.filter("dateOnly2"), filter: 'date', filterParams: appConst.gridHelper.dateFilterParam},
         {headerName:"企业法人/负责人姓名",field:"legalPerson",width: 120},
         {headerName:"经营期限(开始日期)",field:"businessStart",valueGetter: appConst.gridHelper.filter("dateOnly2"), filter: 'date', filterParams: appConst.gridHelper.dateFilterParam},
         {headerName:"经营期限(截止日期)",field:"businessEnd",valueGetter: appConst.gridHelper.filter("dateOnly2"), filter: 'date', filterParams: appConst.gridHelper.dateFilterParam},
         {headerName:"注册资本(万元)",field:"registeredCapital", valueGetter: appConst.gridHelper.filter("currency")},
         {headerName:"营业执照注册号/统一社会信用代码",field:"licenseId",},
         {headerName:"机构信用证代码",field:"creditCode"},
         {headerName:"机构信用代码证有效期",field:"creditPeriod",valueGetter: appConst.gridHelper.filter("dateOnly2"), filter: 'date', filterParams: appConst.gridHelper.dateFilterParam},
         {headerName:"开户许可证核准号",field:"accountPermitsId"},
         {headerName:"企业角色",field:"",width: 120 ,template:'<span> {{data.rolesDesc[0]}} </span>'},
         {headerName:"企业类型",field:"corpTypeDesc",width: 120},
         {headerName:"机构类型",field:"orgTypeDesc",width: 120},
         {headerName:"企业状态",field:"statusDesc"},
      ];

劳您费心啦！

Clark.Pan · Clark.Pan

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

xylxt · xylxt

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

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

请问问题出在那，谢谢

Clark.Pan · Clark.Pan

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

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

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

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的数据变化呢？

yachu · yachu

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

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

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

浏览过的版块

讲师达人

悬赏达人

微信认证勋章

SpreadJS 认证

SpreadJS 高级认证

元老葡萄