ag-Grid не поддерживает компонент .vue в качестве cellRenderer?

Question

Итак, у меня есть файл itemlist.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: "[e-mail]", contact: 8508035076 },
            { name: "Amish Tripathi", email: "[e-mail]", contact: 9250035054 },
            { name: "Zig Ziglar", email: "[e-mail]", contact: 9206635030 },
            { name: "Paulo Coelho", email: "[e-mail]", contact: 7288012335 }
        ];
    },
    methods: {
        loadUsers () {
            // console.log("Loading Users from api.");
        }
    }
};
</script>

И файл index.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>

И отредактируйте файл renderer.vue как:

<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, - это пустые теги редактирования-рендерера

Разве AgGrid не поддерживает cellRenderers во Vue Js? В конце концов, импортированный компонент появляется как компонент vue в Dom, если используется отдельно как общий элемент Dom. Означает ли это, что нам явно нужно как-то его скомпилировать? Я также пробовал использовать setTimeOut перед инициализацией columnDefs и rowData, где используется AgTable. но по-прежнему ничего не показывает в таблице.

Answer 1

Хорошо, поэтому я добавил некоторые недостающие свойства в элемент ag-grid-vue, такие как параметры сетки, контекст и готовность к сетке, а также добавил функцию обновления в компонент средства визуализации и преобразовал все связанные компоненты из простого "экспорта по умолчанию {" "to" экспортировать Vue.extends по умолчанию ({". Я думаю, что эта проблема была решена. Хотя теперь я получаю ошибку 'this is undefined'. Ag-grid должен прояснить, какие параметры являются обязательными, кроме rowData и colDefs с их целью.