ag-Grid 超丰富的表格插件（1）——自定义组件的使用ag-Grid-vue中关于自定义组件(.vue文件)的使用

官方网站原址可点击这里查看

当前需求是使用一个自定义的select组件去进行交互，话不多说 show me code

现在vue文件中进行引入

import CubeComponent from './selectComponent.vue'

之后在需要引入的列中添加（笔者使用新增一列数据并隐藏的方法来解决数据无法及时更新的问题）

{... , field: 'CC',cellRendererFramework: 'CubeComponent'}

{ ... , field: 'CCC', hide: true }, // hide=true 时，该列不显示

Ag-grid 中有三种引入组件的方式，笔者还没有搞清楚三种的具体区别，所以这里直接使用cellRendererFramework来操作

因为需求中标明: select中的option数据需要与表格内其他数据联动并动态获取，所以需要使用ag-grid 自带的改变数据的api

let AAA = []
let rowNode = this.gridApi.getRowNode(BBB)
rowNode.setDataValue('CCC', AAA)

AAA: 动态获取的select列表数据 BBB: 需要传入数据的数据行标 CCC: 在Ag-grid :columnDefs=cols中用来专门存放select数据的field名

以上，便已经完成了在AG-grid 中显示select选择框的需求，下边实现子组件回传数据给父组件的需求

笔者使用的是Ag-grid 自带的context上下文方法

在父组件中定义

首先需要在template的ag-grid-vue标签内添加
```
 :context="context"
```
同样的需要在data中定义 context

在mounted中进行赋值

this.context = {
    componentParent: this
}

在子组件中定义

使用的方法暂且不表,这个方法中子组件传值使用的核心api如下
```
    this.params.context.componentParent.父组件方法名(参数1,参数2,参数3,...)
    参数推荐使用(this.params,select选择的数据, ... )
```
其中 this.params是子组件和直接获取的变量，不用特意在data或者props中定义 this.params其中直接存储这当前行的所有数据

父组件中methods定义的方法

```
    父组件方法名(val,options){
        let rowNode = this.gridApi.getRowNode(val.rowIndex)
        rowNode.setDataValue('CC', options.value)
        ...
    }
```

走到这一步，笔者相信你已经完成了需求。如果还有问题，欢迎在评论区留言


笔者刚刚尝试更文，欢迎各位大佬批评斧正，不胜感激