Vue.js 如何添加列：编辑、删除？

我想使用vue ag网格。所以我已经在文章中看过了

但是我找不到任何关于如何添加

delete

列作为链接按钮的示例

<a :click="handleDelete">delete</a>

handleDelete(itemData) {
 // should open popup here base on itemData…
}

删除
handleDelete（项目数据）{
//应根据itemData在此处打开弹出窗口…
}

这是我正在使用的代码：

<template>
    <ag-grid-vue style="width: 500px; height: 500px;"
                 class="ag-theme-balham"
                 :columnDefs="columnDefs"
                 :rowData="rowData">
    </ag-grid-vue>
</template>

    this.columnDefs = [
                {headerName: 'Make', field: 'make'},
                {headerName: 'Model', field: 'model'},
                {headerName: 'Price', field: 'price'}
            ];

            this.rowData = [
                {make: 'Toyota', model: 'Celica', price: 35000},
                {make: 'Ford', model: 'Mondeo', price: 32000},
                {make: 'Porsche', model: 'Boxter', price: 72000}
            ];

this.columnDefs=[
{headerName:'Make'，field:'Make'}，
{headerName:'Model'，字段：'Model'}，
{headerName:'Price'，字段：'Price'}
];
this.rowData=[
{品牌：'Toyota'，型号：'Celica'，价格：35000}，
{品牌：福特，型号：蒙迪欧，价格：32000}，
{品牌：'Porsche'，型号：'Boxter'，价格：72000}
];

您需要为如下自定义列定义

CellRenderFramework

：

this.columnDefs = [
  { headerName: 'Make', field: 'make' },
  { headerName: 'Model', field: 'model' },
  { headerName: 'Price', field: 'price' },
  { headerName: 'Delete', cellRendererFramework: 'DeleteCell' }
];

还要确保已注册

DeleteCell

组件：

components: {
  AgGridVue,
  DeleteCell,
},

---

以及如何从DeleteCell组件获取当前字段？