[英]calling parent function from cellrenderer like emit on vuejs ag-grid-vue
我已經在我的項目中實現了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但沒有任何幫助?
解決此問題的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}`
);
}
在我的情況下,@click 事件將被自動刪除。 我錯過了什么嗎?
<button @click="editRecord" >Click Me</button>
實際 Output:
<button >Click Me</button>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.