S2在加载了新的row和colums后如何渲染到页面，更新页面数据

annisFromchina commented 2 months ago

🏷 Version

Package	Version
@antv/s2	^2.0.0-next.24
@antv/s2-react	未使用
@antv/s2-vue	^1.0.11

Sheet Type

[√ ] PivotSheet
[ ] TableSheet
[ ] GridAnalysisSheet
[ ] StrategySheet
[ ] EditableSheet

🖋 Description

你好，首先，我使用的是Vue2的框架，接下来是我的问题我目前想要实现这样的透视表：通过两个多选Select栏分别选择值，保存在 s2DataConfig.fields.rows 和 s2DataConfig.fields.columns里面，使rows 和columns做到自定义选择的功能。现在遇到的问题是：已经将新选择的rows 和columns赋值到s2DataConfig.fields里面，使用了const container = this.$refs.container this.s2= new PivotSheet(container, this.s2DataConfig, this.s2Options) 但是页面没有进行更新，数据没有发生改变，后面又测试使用了 this.pivotSheet.render(),页面数据也没有发生改变，我该使用什么语句才能使页面数据重新渲染呢？期待您的回复

🔗 Reproduce Link

checkSerch() { // 直接将选中的值赋值给 s2DataConfig.fields.rows 和 s2DataConfig.fields.columns if (this.s2DataConfig.fields.rows != null) { this.s2DataConfig.fields.rows = this.selectedRows } if (this.s2DataConfig.fields.columns != null) { this.s2DataConfig.fields.columns = this.selectedColumns } console.log(this.s2DataConfig.fields) this.bootstrap() }, async bootstrap() { const container = this.$refs.container this.pivotSheet = new PivotSheet(container, this.s2DataConfig, this.s2Options) this.pivotSheet.on(S2Event.DATA_CELL_CLICK, (event) => { this.pivotSheet.tooltip.show({ position: { x: event.clientX, y: event.clientY }, content: this.dataCellTooltip(), }) }) this.pivotSheet.on(S2Event.MERGED_CELLS_CLICK, (event) => { const cell = this.pivotSheet.getCell(event.target) this.pivotSheet.tooltip.show({ position: { x: event.clientX, y: event.clientY }, content: this.unmergeCell(cell), }) })

  await this.pivotSheet.render() // 异步渲染
},

😊 Expected Behavior

😅 Current Behavior

github-actions[bot] commented 2 months ago

你好 @annisFromchina，请编辑你的 issue 标题, 一个言简意赅的 issue 标题可以节省大家的时间, 请不要将标题当做正文, 或者为空。

Hello, @annisFromchina, please edit your issue title. a concise issue title will save everyone time. please do not leave the title as the body or empty.

lijinke666 commented 2 months ago

后面又测试使用了 this.pivotSheet.render()

数据更新后, 调用 render() 没问题, 且也只有这一个 API, 没必要每次都 this.bootstrap() 重新实例化, 未更新从你提供的代码看起来是 this.s2DataConfig.rows 只更新了引用, 这样 S2 内部是感知不到的, 这样写即可:

this.pivotSheet.setDataCfg({
  fields: {
     rows: this.selectedRows,
     columns: this. selectedColumns
  }
})

this.pivotSheet.render()

antvis / S2