Vue ag-Grid如何添加编辑、删除列？求删除列链接按钮实现方案

我来帮你搞定这个需求，刚好我之前在项目里也配置过类似的功能，咱们一步步来实现：

一、实现删除列（带弹窗确认） #

要实现点击链接按钮弹出确认弹窗并删除行，核心是利用ag-Grid的自定义单元格渲染器来渲染删除按钮，同时获取当前行的数据。这里推荐用Vue组件的方式来实现，更符合Vue的开发习惯：

步骤1：定义自定义删除按钮组件 #

在你的Vue组件中，新增一个局部组件DeleteButton，用来渲染删除链接，并在点击时触发父组件的删除方法：

步骤2：更新columnDefs添加操作列 #

在columnDefs里新增一列，指定用cellRendererFramework引用我们的自定义组件：

步骤3：实现删除逻辑与弹窗确认 #

在父组件中定义handleDelete方法，接收当前行数据，弹出确认弹窗后执行删除操作。

二、实现编辑列 #

ag-Grid自带了开箱即用的编辑功能，只需在列配置中添加editable: true即可开启单元格编辑，还可以监听cell-value-changed事件处理编辑后的逻辑。

完整代码示例 #

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

<script>
export default {
  name: 'AgGridDemo',
  components: {
    // 自定义删除按钮组件
    DeleteButton: {
      props: ['params'],
      template: `<a href="javascript:void(0);" @click="triggerDelete">delete</a>`,
      methods: {
        triggerDelete() {
          this.$parent.handleDelete(this.params.data);
        }
      }
    }
  },
  data() {
    return {
      columnDefs: [
        {headerName: 'Make', field: 'make'},
        {headerName: 'Model', field: 'model'},
        {headerName: 'Price', field: 'price', editable: true}, // 开启编辑功能
        {
          headerName: '操作',
          cellRendererFramework: 'DeleteButton', // 使用自定义组件渲染单元格
          width: 100
        }
      ],
      rowData: [
        {make: 'Toyota', model: 'Celica', price: 35000},
        {make: 'Ford', model: 'Mondeo', price: 32000},
        {make: 'Porsche', model: 'Boxter', price: 72000}
      ]
    }
  },
  methods: {
    handleDelete(itemData) {
      // 这里用原生confirm弹窗，你也可以替换成Element UI/View UI等框架的弹窗组件
      if (confirm(`确定要删除 ${itemData.make} ${itemData.model} 吗？`)) {
        // 过滤rowData，移除当前行
        this.rowData = this.rowData.filter(item => item !== itemData);
      }
    },
    onCellValueChanged(params) {
      // 单元格编辑完成后的回调，可在此调用API保存修改后的数据
      console.log('数据已更新:', params.data);
    }
  }
}
</script>

补充说明 #

如果你不想用自定义组件，也可以用简单的cellRenderer函数实现删除按钮（适合快速测试）：

// 在columnDefs中添加操作列
{
  headerName: '操作',
  field: 'action',
  cellRenderer: (params) => {
    return `<a href="javascript:void(0);" onclick="window.deleteRow('${params.data.make}', '${params.data.model}')">delete</a>`;
  },
  width: 100
}

// 在mounted钩子中定义全局删除函数
mounted() {
  window.deleteRow = (make, model) => {
    const targetItem = this.rowData.find(item => item.make === make && item.model === model);
    this.handleDelete(targetItem);
  }
}

内容的提问来源于stack exchange，提问作者Jon Sud