Ag-grid在vue中使用的必要属性

文档链接

1. id="myGrid"——唯一标识
2. @gridReady——渲染完成后的事件
3. :defaultColDef——this.defaultColDef = {}默认定义：所有的列都有的属性
4. :context—— this.context = { componentParent: this } 上下文对象
5. :rowData——表格数据
6. :columnDefs——this.columnDefs=[]每列数据
7. :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, // 开启排序
    };
    // 如何使用上下文对象，实际应用场景主要是让外部组件和该列表和该vue组件建立关系互相通信
    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();
},