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

[annisFromchina]

🏷 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]

你好 @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]

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

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

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

this.pivotSheet.render()