从单元渲染器调用父函数，如在vuejs ag-grid-vue上发出

Question

我已经在我的项目上实现了ag-grid-vue，现在我在其中一个列上有了一个独立的组件，基本上是Actions，现在用户可以根据所选内容编辑视图或删除，现在编辑和删除它工作得很好，问题是当我删除一个记录时，我希望通过从Api获取更新的数据来重新呈现表，因为我需要在父程序中从CellRenderer组件中调用一些方法，让我向您展示代码。

<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

两种解决办法-

1. cellRendererParams approach

你可以这样使用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>

实际产出：

<button >Click Me</button>