vue2使用ag-grid表格

ag-grid官网：Vue Grid: Custom Components | AG Grid

根据官方文档说的AG Grid no longer supports Vue 2. The last version to support Vue 2 is AG Grid v31.3.，目前只有v31.3.版本支持vue2。

以下是官方给的demo

Vue Grid: Get Started with AG Grid | AG GridIn this article, we will walk you through the necessary steps to add AG Grid (both are covered) to an existing Vue project, configure some of the essential features of it. We will show you some of the fundamentals of the grid (passing properties, using the API, etc). As a bonus, we will also tweak the grid's visual appearance using Sass variables. Download AG Grid v32.1.0 today: The best Vue Table & Vue Data Grid in the world.https://www.ag-grid.com/vue-data-grid/vue2/#reference-App.vue

1、在vue组件中引入使用

<template>
  <ag-grid-vue
    style="width: 100%; height: 500px;"
    class="ag-theme-alpine"
    :columnDefs="columnDefs"
    :rowData="rowData"
    :gridOptions="gridOptions"
    @grid-ready="onGridReady"
    @cellEditingStopped="onCellEditingStopped"
    @cellClicked="handleCellClick"
  />
</template>

<script>
  import "ag-grid-community/styles/ag-grid.css";
  import "ag-grid-community/styles/ag-theme-balham.css";
  import { AgGridVue } from "ag-grid-vue/lib/main.cjs";
  export default {
    components: {
      AgGridVue
    },
    data() {
      return {
        columnDefs: [ // 表格列配置
          { // 勾选列
            headerName: "",
            checkboxSelection: true,
            headerCheckboxSelection: true,
            pinned: 'left',
            width: 50
          },
          {
            headerName: '序号',
            field: 'index',
            pinned: 'left', // 列固定到左边
            sortable: false, // 禁用自带排序，默认为true
            width: 60,
            suppressMovable: true, // 禁用拖拽表头，Set to true if you do not want this column to be movable via dragging.
            cellRenderer: function (params) { // 自定义单元格渲染内容
              return parseInt(params.node.id) + 1
            },
            cellStyle: {
              'text-align': 'center' // 表格文字居中， 不包括表头文字
            }
          },
          {
            headerName: '回复备注',
            suppressMovable: true,
            field: "confirmComment",
            editable: (params) => { // 是否可编辑，true/false/function
              // console.log(params)
              return params.data.action === 'Confirm(回复)' && this.userType === 'VENDOR'
            },
            sortable: false,
            width: 150,
            cellStyle: {
              'text-align': 'center'
            }
          },
          {
            headerName: '数量',
            suppressMovable: true,
            field: "inProcessQty",
            editable: (params) => {
              // console.log(params)
              return params.data.action === 'Confirm(回复)' && this.userType === 'VENDOR'
            },
            cellDataType: 'number', // 数据类型，
            sortable: false,
            width: 150,
            cellStyle: {
              'text-align': 'center'
            }
          },
          {
            headerName: '第一周',
            suppressMovable: true,
            sortable: false,
            cellStyle: {
              'text-align': 'center'
            },
            children: [
              {
                headerName: '第一天',
                suppressMovable: true,
                sortable: false,
                cellStyle: {
                  'text-align': 'center'
                },
                children: [
                  {
                    headerName: '9.2白班',
                    suppressMovable: true,
                    field: "day",
                    sortable: false,
                    cellStyle: {
                      'text-align': 'center'
                    },
                  },
                  {
                    headerName: '9.2夜班',
                    suppressMovable: true,
                    field: "night",
                    sortable: false,
                    cellStyle: {
                      'text-align': 'center'
                    },
                  }
                ]
              }
            ]
          }
        ],
        rowData: [], // 表格数据
        gridOptions: { // 表格相关配置
          enableCellTextSelection: true, // 允许复制单元格内容
          enableRangeSelection: true,
          rowSelection: 'multiple',  // 可勾选多行
          suppressRowClickSelection: true,
        }
      }
    },
    created() {
      this.getTableData()
    },
    methods: {
      onGridReady(params) {
        this.gridApi = params.api
        console.log(params, 'params')
      },
      getTableData(){
        this.$http({url: 'xxx'}).then(res => {
          this.gridApi.setColumnDefs(res);
        })
      },
      onCellEditingStopped(event){
        console.log(event, 'cell stop edit')
      },
      handleCellClick(event){
        console.log(event, 'click cell')
      },
    }
  };
</script>

<style scoped lang="scss">
  .the_returnedGoodsNoticeList_wrapper {
    & /deep/ .el-form .el-row .el-form-item:first-child {
      width:100%
    }
  }
  .ag-theme-balham {
    /* disable all borders */
    /*--ag-borders: none;*/
    /* then add back a border between rows */
    --ag-row-border-style: solid;
    --ag-row-border-width: 1px;
    --ag-row-border-color: #dfe6ec;
    /* and between columns */
    --ag-cell-horizontal-border: #dfe6ec;
  }
  .ag-theme-balham {
    --ag-header-height: 30px;
    --ag-header-foreground-color: black;
    --ag-header-background-color:  #88c1f4;
    --ag-cell-horizontal-border: solid #dfe6ec;
    /*--ag-header-cell-hover-background-color: rgb(80, 40, 140);*/
    /*--ag-header-cell-moving-background-color: rgb(80, 40, 140);*/
    --ag-header-column-separator-display: block;
    --ag-header-column-separator-height: 100%;
    /*--ag-header-column-separator-width: 2px;*/
    --ag-header-column-separator-color: white;

    --ag-header-column-resize-handle-display: block;
    --ag-header-column-resize-handle-height: 25%;
    /*--ag-header-column-resize-handle-width: 5px;*/
    --ag-header-column-resize-handle-color: white;
  }
  /* 固定列右边框 */
  /deep/ .ag-pinned-left-header {
    border-right: 1px solid white;
  }
 /* .ag-theme-balham .ag-header {
    font-family: cursive;
  }
  .ag-theme-balham .ag-header-group-cell {
    font-weight: normal;
    font-size: 22px;
  }
  .ag-theme-balham .ag-header-cell {
    font-size: 18px;
  }*/
  /*表头文字居中*/
  /deep/ .ag-theme-balham [class^='ag-'],
  .ag-theme-balham [class^='ag-']:focus,
  .ag-theme-balham [class^='ag-']:after,
  .ag-theme-balham [class^='ag-']:before {
    text-align: center;
  }
  /deep/ .ag-header-cell-text{
    text-align: center ;
    width: 100%;
  }
  /deep/ .ag-header-cell{
    border-top: 1px solid white !important;
  }
  /deep/ .ag-header-group-cell-with-group {
    border-top: 1px solid white !important;
  }
  /deep/ .ag-header-group-cell {
    justify-content: center;
  }
</style>

以上是我实践的demo，其中需要注意的点有：

1、包的引入，我与官方给的不一样，因为我按照官方方法报错了，

2、需要勾选列，要在columnDefs里面配置这一列

3、代码中的css包括修改表头背景、表头文字居中、表格边框

效果差不多如下图：

我这只是皮毛，基础用法，ag-grid还有很多很多功能属性有待探索。