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

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"},
      ];

劳您费心啦！

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

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

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

Clark.Pan · Clark.Pan

您的回复没有丢失，在上面写着呢，我看一下您的demo再给您回复。

Clark.Pan · Clark.Pan

您的需求就是手动进行绑定信息的设置，参考附件demo
使用方式和正常的js框架的方式相同，参考
https://demo.grapecity.com.cn/Sp ... s/sheetLevelBinding

yachu · yachu

ClarkPan 发表于 2018-10-8 15:47
您的需求就是手动进行绑定信息的设置，参考附件demo
使用方式和正常的js框架的方式相同，参考
https://de ...

问题解决啦！非常感谢！

Clark.Pan · Clark.Pan

不客气，有什么问题欢迎另开新帖进行询问。

yachu · yachu

ClarkPan 发表于 2018-10-8 17:15
不客气，有什么问题欢迎另开新帖进行询问。

好的，有问题了，这就开新帖。

KevinChen · KevinChen

好的，本帖结帖处理了，新帖中回复。

红发香克斯 · 红发香克斯

talk is cheap, show me the code.

import axios from 'axios'
export default class LoadData {
constructor(method, url, params) {
this.config = { method, url }
if (method === 'get') this.config.params = { ...params }
if (method === 'post') this.config.data = { ...params }
}
getData() {
return new Promise(resolve => {
axios(this.config).then(res => {
resolve(res.data)
})
})
}
}
// 获取后端的数据
loadData() {
let params = {
// projectId: this.projectId
projectId: 145,
// fuzzy: '',
}
let load = new LoadData(
'get',
API.whole_stationPlan_externalPro,
params
)
load.getData().then(json => {
console.log(json.obj)
this.spreadDataSource = [...json.obj]
})
},

复制代码

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

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

评分

讲师达人

悬赏达人

微信认证勋章

SpreadJS 认证

SpreadJS 高级认证

元老葡萄