1、在Vue專案中新建一個樣式檔案  src/assets/styles/table.scss ，引入ag-grid預設的樣式檔案

table.scss

$ag-icons-path: "../../../node_modules/ag-grid-community/src/styles/icons/";

@import '../../../node_modules/ag-grid-community/src/styles/ag-grid.scss';
@import '../../../node_modules/ag-grid-community/src/styles/ag-theme-balham.scss';

2、將該檔案引入到main.js中

import './assets/styles/table.scss';

3、直接在Vue組建中使用ag-grid建立表格

<template>
  <div>
    <!-- gridReady 繫結一個事件，在表格建立完成後執行 -->
    <ag-grid-vue class="table ag-theme-balham" :columnDefs="columnDefs" :rowData="rowData" rowSelection="multiple" :gridReady="onGridReady"></ag-grid-vue>
  </div>
</template>

<script>
// 引入ag-grid-vue
import { AgGridVue } from 'ag-grid-vue';
export default {
  components: { AgGridVue },
  data () {
    return {
      gridApi: null,
      columnApi: null,
      columnDefs: [
        {headerName: '', field: '', maxWidth: 44, checkboxSelection: true},
        {headerName: '姓名', field: 'name'},
        {headerName: '性別', field: 'gender'},
        {headerName: '年齡', field: 'age'},
        {headerName: '收入', field: 'income'},
        {headerName: 'ID', field: 'id'}
      ],
      rowData: [
        {name: '李煜', gender: '男', age: 20, income: 2000, id: 1},
        {name: '柳葉', gender: '女', age: 25, income: 2500, id: 2},
        {name: '姜宇', gender: '男', age: 18, income: 1800, id: 3}
      ]
    };
  },
  methods: {
    // 表格建立完成後執行
    onGridReady (params) {
      console.log(params);
      // 獲取gridApi
      this.gridApi = params.api;
      this.columnApi = params.columnApi;
      // 調整表格列寬大小自適應
      this.gridApi.sizeColumnsToFit();
    }
  }
};
</script>

<style scoped>
.table{
  width: 60%;
  height: 200px;
}
</style>
 

預設的ag-theme-balham主體樣式：

4、在table.scss 中修改ag-grid表格樣式

$ag-icons-path: "../../../node_modules/ag-grid-community/src/styles/icons/";
// 將交替的行背景顏色覆蓋為灰藍色
$odd-row-background-color:#E2EEF3;
// 改變表格邊框顏色
$border-color: #E9EC27;
// 改變表格資料字型大小（不包含表頭字型大小）
$font-size: 16px;

@import '../../../node_modules/ag-grid-community/src/styles/ag-grid.scss';
@import '../../../node_modules/ag-grid-community/src/styles/ag-theme-balham.scss';
 

修改樣式後