文档链接
id="myGrid"
——唯一标识@gridReady
——渲染完成后的事件:defaultColDef
——this.defaultColDef = {}默认定义:所有的列都有的属性:context
—— this.context = { componentParent: this } 上下文对象:rowData
——表格数据:columnDefs
——this.columnDefs=[]每列数据:pagination="true"
启动分页
<ag-grid-vue
id="myGrid"
@gridReady="onGridReady"
:columnDefs="columnDefs"
:rowData="rowData"
:defaultColDef="defaultColDef"
:context="context"
:gridOptions="gridOptions"
:pagination="true"
\>
</ag-grid-vue>
data() {
return {
gridName: "myList",
defaultColDef: null,
columnDefs: null,
gridApi: null,
rowData: [],
gridOptions:{},
}
}
beforeMount() {
this.columnDefs = [
{ headerName: "ASIN", field: "asin"},
{ headerName: "全选|图片", field: "imageUrl",cellRendererFramework: "AgGridImgTooltips"},
{ headerName: "分析", cellRendererFramework: "AgGridOperationTooltipsGoodsStatistics"},
},
];
this.defaultColDef = {
valueFormatter: this.valueFormatter,
resizable: true,
sortable: true,
};
this.context = { componentParent: this };
},
onGridReady(params) {
this.gridApi = params.api;
this.gridColumnApi = params.columnApi;
this.setGridColumn(this.gridName)
this.getMyList(this.searchForm)
this.gridApi.sizeColumnsToFit();
},