Vue项目中使用Sass变量自定义ag-grid表格主题样式

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},
        {name: '李煜', gender: '男', age: 20, income: 2000, id: 4},
        {name: '柳叶', gender: '女', age: 25, income: 2500, id: 5},
        {name: '姜宇', gender: '男', age: 18, income: 1800, id: 6}
      ]
    };
  },
  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: 240px;
}
</style>

默认的ag-theme-balham主体样式：

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

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

// 改变表格边框颜色
$border-color: #650EF1;
// 设置表头背景颜色
$header-background-color: #C1D4EC;
// 设置表头字体大小
$secondary-font-size: 18px;
// 改变表格数据字体大小（不包含表头字体大小）
$font-size: 16px;
// 设置表格默认背景颜色
$background-color: #F7E2E2;
// 设置交替行背景颜色
$odd-row-background-color:#EBF1CF;
// 设置鼠标所在表格的行背景色
$hover-color: #dfdfff;
// 设置字体颜色
$foreground-color: #F03F17;

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

修改样式后

鼠标放到表格第三行上：

5、设置鼠标放在表格某行某列时的背景颜色（使用类样式方法）

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

// 设置鼠标所在表格的行背景色
.ag-row-hover {
  background-color: #dfdfff !important;
}
// 等价于：
// $hover-color: #dfdfff;

// 设置鼠标所在表格的列背景色
.ag-column-hover {
  background-color: #dfffdf;
}

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