вызов родительской функции из cellrenderer, например emit on vuejs ag-grid- vue

Question

Я реализовал ag-grid-vue в моем проекте, теперь у меня есть отдельный компонент в одном из столбцов, который в основном Действия , теперь пользователь может либо редактировать представление, либо удалять в зависимости от выбора, теперь для редактирования и удаления он работает нормально, проблема в том, что когда я удаляю запись, я хочу, чтобы таблица была повторно визуализирована путем извлечения обновленных данных из 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>

теперь компонент выше находится там, где мне нужно внести изменения, я попытался использовать регулярное vuejs emit и на , но это не помогло?

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. Использование контекстной сетки Вариант

Есть другой способ решить эту проблему, как описано в этом примере

Вы в основном настраиваете контекст в своем основном компоненте сетки следующим образом -

:context="context" (in template)

this.context = { componentParent: this };

Затем в своем компоненте вы можете вызвать родительский компонент следующим образом -

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