从 cellrenderer 调用父函数，例如在 vuejs ag-grid-vue 上发出

Posted 2023-03-28

【中文标题】从 cellrenderer 调用父函数，例如在 vuejs ag-grid-vue 上发出

【英文标题】：calling parent function from cellrenderer like emit on vuejs ag-grid-vue

【发布时间】：2020-09-17 04:33:21

【问题描述】：

我已经在我的项目中实现了ag-grid-vue，现在我在其中一个列上有一个单独的组件，基本上是 Actions ，现在用户可以根据选择编辑视图或删除，现在编辑和删除它工作得很好，问题是当我删除一条记录时，我希望通过从 Api 获取更新的数据来重新渲染表，因为我需要在父级中调用一些方法，从CellRenderer 组件，让我给你看代码

HTML

<ag-grid-vue
        ref="agGridTable"
        :components="components"
        :gridOptions="gridOptions"
        class="ag-theme-material w-100 my-4 ag-grid-table"
        :columnDefs="columnDefs"
        :defaultColDef="defaultColDef"
        :rowData="accounts"
        rowSelection="multiple"
        colResizeDefault="shift"
        :animateRows="true"
        :floatingFilter="true"
        :pagination="true"
        :paginationPageSize="paginationPageSize"
        :suppressPaginationPanel="true"
        :enableRtl="$vs.rtl">
      </ag-grid-vue>

JS

import CellRendererActions from "./CellRendererActions.vue"

  components: 
    AgGridVue,
    vSelect,
    CellRendererActions,
  ,

columnDefs: [

          headerName: 'Account ID',
          field: '0',
          filter: true,
          width: 225,
          pinned: 'left'
        ,
          headerName: 'Account Name',
          field: '1',
          width: 250,
          filter: true,
        ,
         
          headerName: 'Upcoming Renewal Date',
          field: '2',
          filter: true,
          width: 250,
        ,
        
          headerName: 'Business Unit Name',
          field: '3',
          filter: true,
          width: 200,
        ,
        
          headerName: 'Account Producer',
          field: '4',
          filter: true,
          width: 200,
        ,
        
          headerName: 'Actions',
          field: 'transactions',
          width: 150,
          cellRendererFramework: 'CellRendererActions',
        ,
      ],
components: 
        CellRendererActions,
      

CellRenderer 组件

<template>
    <div :style="'direction': $vs.rtl ? 'rtl' : 'ltr'">
      <feather-icon icon="Edit3Icon" svgClasses="h-5 w-5 mr-4 hover:text-primary cursor-pointer" @click="editRecord" />
      <feather-icon icon="EyeIcon" svgClasses="h-5 w-5  mr-4 hover:text-danger cursor-pointer" @click="viewRecord" />
      <feather-icon icon="Trash2Icon" svgClasses="h-5 w-5 hover:text-danger cursor-pointer" @click="confirmDeleteRecord" />
    </div>
</template>

<script>

import  Auth  from "aws-amplify";
import  API  from "aws-amplify";
    export default 
        name: 'CellRendererActions',
        methods: 
          async deleteAccount(accountId) 
            const apiName = "hidden";
            const path = "/hidden?id="+accountId;
            const myInit = 
              headers: 
                Authorization: `Bearer $(await Auth.currentSession())
                  .getIdToken()
                  .getJwtToken()`
              
            ;
            return await API.get(apiName, path, myInit);
          ,
          viewRecord()
            this.$router.push("/accounts/" + this.params.data[0]).catch(() => )
          ,
          editRecord() 
            // console.log(this.params.data);
            this.$router.push("hidden" + this.params.data[0]).catch(() => )

            /*
              Below line will be for actual product
              Currently it's commented due to demo purpose - Above url is for demo purpose

              this.$router.push("hidden" + this.params.data.id).catch(() => )
            */
          ,
          confirmDeleteRecord() 
            this.$vs.dialog(
              type: 'confirm',
              color: 'danger',
              title: `Confirm Delete`,
              text: `You are about to delete "$this.params.data[1]"`,
              accept: this.deleteRecord,
              acceptText: "Delete"
            )
          ,
          deleteRecord() 
            /* Below two lines are just for demo purpose */
            this.$vs.loading( color: this.colorLoading );
             this.deleteAccount(this.params.data[0]).then(() => 
                this.$vs.loading.close();
                this.showDeleteSuccess()
            );


            /* UnComment below lines for enabling true flow if deleting user */
            // this.$store.dispatch("userManagement/removeRecord", this.params.data.id)
            //   .then(()   =>  this.showDeleteSuccess() )
            //   .catch(err =>  console.error(err)       )
          ,
          showDeleteSuccess() 
            this.$vs.notify(
              color: 'success',
              title: 'User Deleted',
              text: 'The selected user was successfully deleted'
            )
          
        
    
</script>

现在上面的组件是我需要进行更改的地方，我尝试使用 reqgular vuejs emit 和 on 但这没有任何帮助？

【参考方案1】：

解决这个问题的两种方法 -

1. cellRendererParams 方法

你可以像这样使用cellRendererParams -

cellRendererParams : 
      action : this.doSomeAction.bind(this); // this is your parent component function

现在您可以在您的单元格渲染器组件中调用此操作

this.params.action(); // this should correspond to the object key in cellRendererParam

2。使用上下文 gridOption

如example 中所述，还有另一种解决方法

你基本上像这样在你的主网格组件中设置上下文 -

:context="context" (in template)

this.context =  componentParent: this ;

然后在你的组件中你可以像这样调用父组件 -

invokeParentMethod() 
  this.params.context.componentParent.methodFromParent(
    `Row: $this.params.node.rowIndex, Col: $this.params.colDef.headerName`
  );