Vue中点击柱状图后如何重载Bryntum Grid组件展示新数据

架构老林

2026-9-29

Vue中Bryntum Grid组件重载及数据更新解决方案

首选方案：通过官方API直接更新数据（无需重载组件）

Bryntum Grid 内置独立的状态管理体系，直接调用实例API更新数据性能远高于组件重载，操作步骤如下：

给Bryntum Grid组件绑定ref获取实例：

<BryntumGrid ref="gridRef" :columns="columns" :data="initialData" />

柱状图点击事件中直接更新表格数据源：

Vue2 写法：

handleBarClick(barData) {
  const gridInstance = this.$refs.gridRef.instance
  // 全量替换表格数据
  gridInstance.store.data = 你的新数据数组
}

Vue3 写法：

const gridRef = ref(null)
const handleBarClick = (barData) => {
  const gridInstance = gridRef.value.instance
  gridInstance.store.data = 你的新数据数组
}

如果是增量更新数据，可以调用store.add()、store.remove()、store.update()等方法，无需全量赋值。

备选方案：强制重载组件（仅适用于需要重置所有内部状态的场景）

之前绑定key不生效的核心原因是Bryntum Grid内部有独立的实例缓存，仅修改key不会自动销毁旧实例，正确操作步骤如下：

给Grid组件同时绑定响应式key和ref

<BryntumGrid ref="gridRef" :key="gridKey" :columns="columns" :data="initialData" />

声明响应式key变量

// Vue2
data() {
  return {
    gridKey: 1
  }
}

// Vue3
const gridKey = ref(1)

点击柱状图时先销毁旧实例再更新key触发重载

handleBarClick(barData) {
  // 销毁旧的Grid实例
  this.$refs.gridRef?.instance.destroy() // Vue2
  // gridRef.value?.instance.destroy() // Vue3
  // 递增key触发Vue卸载旧组件、挂载新组件
  this.gridKey += 1 // Vue2
  // gridKey.value += 1 // Vue3
}