ag-grid-vue动态改变大小
时间: 2023-02-08 13:28:22 浏览: 77
ag-grid-vue 支持动态更改大小。可以使用 Vue 绑定的方式在组件的 data 属性上绑定 grid 的宽度和高度,并在该值发生更改时触发 grid 的重新渲染。
举个例子:
```javascript
<template>
<ag-grid-vue
:columnDefs="columnDefs"
:rowData="rowData"
:gridOptions="gridOptions"
:style="{width: gridWidth + 'px', height: gridHeight + 'px'}"
></ag-grid-vue>
</template>
<script>
export default {
data: () => ({
columnDefs: [],
rowData: [],
gridOptions: {},
gridWidth: '600',
gridHeight: '400',
}),
methods: {
updateGridSize(width, height) {
this.gridWidth = width;
this.gridHeight = height;
}
}
}
</script>
```
在这个例子中,gridWidth 和 gridHeight 是两个数据属性,可以通过 updateGridSize 方法动态更新。
需要注意的是,在更改宽度和高度后,需要手动调用 gridApi.sizeColumnsToFit() 或 gridApi.doLayout() 来调整列的宽度,以适应新的大小。