aggrid在vue中的应用

安装
配置
特殊应用

安装

npm install --save ag-grid-community ag-grid-vue

引入样式到src/App.vue

<style lang="scss">
  @import "../node_modules/ag-grid-community/dist/styles/ag-grid.css";
  @import "../node_modules/ag-grid-community/dist/styles/ag-theme-balham.css";
</style>

配置

基本配置

官方文档https://www.ag-grid.com/vuejs-grid/
中文文档https://yuguo.site/2018/10/15/ag-grid-vue-%E4%B8%AD%E6%96%87%E6%96%87%E6%A1%A3%EF%BC%88%E5%85%A5%E9%97%A8%EF%BC%89/#more

<template>
    <ag-grid-vue style="width: 500px; height: 500px;" // 需要指定宽高，或者设置width: 100%; height: 100%
                 class="ag-theme-balham" // 表格主题样式
                 :columnDefs="columnDefs" // 列设置
                 :rowData="rowData" // 数据
                 :class="customClass" // 自定义类
                 :gridOptions="gridOptions" // 整个表格的配置
                 :gridReady="onGridReady" // 通过这个可以拿到所有的aggrid的api和配置的属性
                 :localeText="localeText" // 汉化
                 :frameworkComponents="frameworkComponents" // 在vue中可用Vue.extend配置组件
>
    </ag-grid-vue>
</template>
<script>
    import {AgGridVue} from "ag-grid-vue";
    import { localeText } from '你的汉化文件，网上有'

    export default {
        name: 'xxx', // 这个封装组件的名字，封装基本的属性配置后，在其他组件直接引用这个组件
        data() {
            return {
                columnDefs: null,
                rowData: null,
                localeText: localeText,
                gridOptions: {
                 'enableSorting': true, //启用排序
                 'enableFilter': false, // 这个和下面的floatingFilter有所区别，一个就够了
                 'enableColResize': true, // 列可伸缩
                 'rowSelection': 'multiple', // 支持多选
                 'floatingFilter': true, // 是否显示列过滤
                 'defaultColDef': { // 默认的列属性
                     editable: false,
                     singleClickEdit: false,
                  },
                frameworkComponents: { // 引用组件（需要先导入，这个看自己定义了什么组件，在前面记得import），组件示例见下 
                  xxx,
                  xxx,
                  ...
                }
            }
        },
        components: {
            AgGridVue
        },
        beforeMount() {
            this.columnDefs = [
                {headerName: 'Make', field: 'make'},
                {headerName: 'Model', field: 'model'},
                {headerName: 'Price', field: 'price'}
            ];
            this.rowData = [
                {make: 'Toyota', model: 'Celica', price: 35000},
                {make: 'Ford', model: 'Mondeo', price: 32000},
                {make: 'Porsche', model: 'Boxter', price: 72000}
            ];
        },
        methods: {
          onGridReady (agGrid) {
            this.$emit('onGridReady', agGrid);
          }
    }
</script>

aggrid扩展vue组件示例

/**
 * 自定义表格第一列组件渲染，鼠标悬停显示加减操作符，默认显示序号
 */
import Vue from 'vue'
export default Vue.extend({
  template: `
    <div class="grid-left">
     <span class="rowIndex">{{num}}</span>
     <span class="operate" ><i class="el-icon-plus plus" @click="doPlus"></i><i class="el-icon-minus minus" @click="doMinus"></i></span>
    </div>
    `,
  data() {
    return {
    }
  },
  watch: {
  },
  computed: {
    num() {
      return this.params.node.rowIndex + 1 // 序号为行号
    }
  },
  methods: {
    doPlus() { // 增加一行
      let girdOptions = this.params.api.gridCore.gridOptions
      girdOptions.rowData.splice(this.params.node.rowIndex + 1, 0, {'needChoose': true}) // 后面的数据是随意写的
      girdOptions.api.setRowData(girdOptions.rowData) // 重新设置行数据
      girdOptions.api.redrawRows() // 通过这种方式渲染表格的序号没有及时刷新，需要调用这个方法
    },
    doMinus() { // 减少一行
      let girdOptions = this.params.api.gridCore.gridOptions
      girdOptions.rowData.splice(this.params.node.rowIndex, 1)
      girdOptions.api.setRowData(girdOptions.rowData)
      girdOptions.api.redrawRows()
    }
  },
})

扩展的组件需要在列设置中配置使用

/**
* 列配置（个人习惯把配置写在另一个文件）
*/
const columns = [
  {
    headerName: '序号' ,
    width: 80,
    minWidth: 50,
    cellRenderer: 'xxx', // 这里可以使用自己定义的组件来渲染，除了cellRenderer还有好的renderer，自己对应写便是
    suppressSorting: true, // 禁用排序
//  cellRendererFramework: xxx, // 也可以通过引用的方式渲染
 // cellEditorFramework: xxx, // 这个可以设置编辑状态的组件
    suppressFilter: true // 禁用筛选
 },

特殊应用

this.gridOptions.getRowStyle = this.getRowStyle // 行样式
this.gridOptions.onSortChanged = this.onSortChanged // 排序完成回调
this.gridOptions.onCellClicked = this.onCellClicked // 单元格点击
this.gridOptions.api.setPinnedBottomRowData([{'pinned': true, 'rowNum': '合计'}]) // 固定底部

getRowStyle(param) {
        if (param.data.rowNum === '合计') {
          return { background: '#fff6d9' }
        }
 },
onSortChanged() { // 这个方法使用了房子排序后序号全乱了
  this.gridOptions.api.redrawRows({}) // 如果使用valueGetter渲染数据，则使用this.gridOptions.api.refreshCells(['columnName'])
},
onCellClicked(params) { // 因为设置单击编辑单元格无效，迫于无奈通过这种方式实现
        let focusedCell = this.gridOptions.api.getFocusedCell()
        console.log(focusedCell)
        if (focusedCell.column.colDef.field === 'mobile') {
          this.gridOptions.api.startEditingCell({
            rowIndex: params.node.rowIndex,
            colKey: 'mobile'
          })
        }
      },