ag-grid 使用cellRendererSelector或cellRenderer渲染单元格，数据更新联动

最新推荐文章于 2024-11-06 17:05:25 发布

原创最新推荐文章于 2024-11-06 17:05:25 发布 · 5.2k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#typescript #javascript #前端

本文介绍了如何通过定义statusUpdateListener在A组件中监控数据变化，然后在B组件中通过updateListener接收到更新并作出相应处理。展示了如何将父组件方法传递给子组件并实现数据同步与组件交互。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

例如A组件数据更新后，需要B组件做出处理

1.渲染两个组件

 const columnDefs: (ColDef | ColGroupDef)[] = [ {
        headerName: 'Type',//渲染出的header
        field: 'Type',//关联的字段
        editable: false,//false为不可编辑
        // cellRenderer: TypeCellRender,//渲染自定义组件
        cellRendererSelector: function (row) {
          return { component: row.value ? TypeCellRender : '' }
        },//某中条件下渲染自定义组件
      },
      {
        headerName: 'Value',
        field: 'Value',
        cellRendererSelector: function (row) {
          return { component: row.value ? valueCellRender : '' }
        },
        editable: false,
        cellRendererParams: {
          updateFunction: params.updateData,
          updateTypeFn: params.updateType
        },//将父组件的方法塞入自定义组件，供其使用
        cellStyle: { padding: 0 },//修改样式
      }]

2.A组件定义监控方法，在需要监控数据更新的地方调用

 statusUpdateListener(dataID: string) {
        if (this.status === 'Success') {
            const event = new CustomEvent(`${dataID}-statusChanged`, {
                detail: {
                    status: 'Success'//可传参数
                }
            });
            document.dispatchEvent(event);
        }
    }

3.B组件定义接收数据更新的方法，并作出处理

updateListener(dataID: string) {
     document.addEventListener(`${dataID}-statusChanged`, (e: any) => {
            this.disable = true//处理数据
        }, false);
    }
    
agInit(params: ICellRendererParams): void {
     this.params = params;
     this.updateListener(this.params.data.id)//调用方法
 }

statusChanged用来识别，数据监控