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>

 

 

posted @ 2022-01-12 17:27  氧化成风  阅读(3474)  评论(0编辑  收藏  举报