Итак, у меня есть этот список элементов. vue файл
<div>
<div>
<ag-table
style=" height: 650px;"
class="ag-theme-balham"
:column-defs="columnDefs"
:row-data="rowData"
/>
</div>
</div>
</template>
<script>
import AgTable from "../components/AgTable";
import editRenderer from "../components/AgGridRenderers/editDeleteRenderer.vue";
export default {
components: {
AgTable
},
data: () => ({
users: [],
columnDefs: null,
rowData: null,
editR: editRenderer
}),
mounted () {
this.columnDefs = [
{ headerName: "Name", field: "name", sortable: true, filter: true },
{ headerName: "e-Mail", field: "email", sortable: true, filter: true },
{ headerName: "Contact", field: "contact", sortable: true, filter: true },
{ headerName: "Contact", field: "contact", sortable: true, filter: true, cellRenderer: editRenderer }
];
this.rowData = [
{ name: "Robin Sharma", email: "robin@sharma.com", contact: 8508035076 },
{ name: "Amish Tripathi", email: "amish@tripathi.com", contact: 9250035054 },
{ name: "Zig Ziglar", email: "zig@ziglar.com", contact: 9206635030 },
{ name: "Paulo Coelho", email: "paolo@coelho.com", contact: 7288012335 }
];
},
methods: {
loadUsers () {
// console.log("Loading Users from api.");
}
}
};
</script>
И индекс. vue файл для таблицы сетки Ag в виде
<template>
<div>
<ag-grid-vue
style=" height: 650px;"
class="ag-theme-balham"
:column-defs="_props.columnDefs"
:row-data="_props.rowData"
:framework-components="frameworkComponents"
/>
</div>
</template>
<script>
import "ag-grid-community/dist/styles/ag-grid.css";
import "ag-grid-community/dist/styles/ag-theme-balham.css";
import { AgGridVue } from "ag-grid-vue";
import editRenderer from "../AgGridRenderers/editDeleteRenderer.vue";
export default {
components: {
AgGridVue
},
props: [
"column-defs", "row-data"
],
data: () => ({
frameworkComponents: {
editRenderer
}
}),
mounted () {
console.log(this._props.columnDefs, this._props.rowData);
}
};
</script>
и editrenderer. vue файл as:
<template>
<div>
<span>
<button @click="sayHi"> Edit Item </button>
</span>
</div>
</template>
<script>
export default {
created () {
console.log("Hello from Edit");
},
methods: {
sayHi () {
alert("Hi");
}
}
};
</script>
И все, что я получаю в DOM - это пустые теги edit-renderer
Разве AgGrid не поддерживает cellRenderers в Vue Js? В конце концов, импортированный компонент отображается как компонент vue в Dom, если он используется отдельно как общий элемент Dom. Значит ли это, что мы должны каким-то образом явно его скомпилировать? Я также пытался использовать setTimeOut перед инициализацией columnDefs и rowData, где используется AgTable. но в таблице ничего не отображается.