0

所以我有这个 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: "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>

Ag 网格表的 index.vue 文件为

<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文件为：

<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 不支持 Vue Js 中的 cellRenderers 吗？最后导入的组件如果单独作为普通的 Dom 元素使用的话，最终会在 Dom 中以 vue 组件的形式出现。这是否意味着我们必须明确地以某种方式编译它？在初始化使用 AgTable 的 columnDefs 和 rowData 之前，我还尝试使用 setTimeOut。但它仍然没有在表格中显示任何内容。

4

1 回答 1

0

好的，所以我所做的是向 ag-grid-vue 元素添加一些缺少的属性，例如 grid-options、context 和 grid-ready，并向渲染器组件添加刷新功能，并将所有相关组件从简单的“导出默认{ " to "export default Vue.extends({"。我认为这个问题已经解决了。不过，我现在得到'这是未定义的'错误。Ag-grid 应该澄清除了 rowData 和 colDefs 之外哪些参数是强制性的。

于 2020-03-10T04:53:50.920 回答