从 cellrenderer 调用父 function 就像在 vuejs ag-grid-vue 上发出

Question

我已经在我的项目中实现了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但没有任何帮助？

Answer 1

解决此问题的2种方法-

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

如本示例中所述，还有另一种方法可以解决此问题

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

:context="context" (in template)

this.context = { componentParent: this };

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

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

Answer 2

在我的情况下，@click 事件将被自动删除。 我错过了什么吗？

<button @click="editRecord" >Click Me</button>

实际 Output：

<button >Click Me</button>