vue3中使用 ag-grid 表格組件

安裝：

 cnpm install ag-grid-vue3 ag-grid-community vue-class-component@next

 

使用：

// //引入樣式文件
// import 'ag-grid-enterprise';
import "ag-grid-community/dist/styles/ag-grid.css";
import "ag-grid-community/dist/styles/ag-theme-alpine.css";
import "ag-grid-community/dist/styles/ag-theme-balham.css"
// //引入ag-grid-vue
import { AgGridVue } from "ag-grid-vue3";

　components: {

    AgGridVue

  },

 

 

HTML:

<ag-grid-vue 
      style="width: 100%; height: 200px;" 
      class="table ag-theme-balham"
      :columnDefs="columnDefs" 
      :rowData="rowData" 
      :enableColResize="false"
      @gridReady="onGridReady" 
      rowSelection="multiple"
      rowHeight='50'
      :enableSorting="true"
      :sideBar="sideBar"
      :pagination="true"
      :paginationPageSize="10"
      ></ag-grid-vue>