在 AG-Grid table 个单元格内单击按钮时执行功能 - Vuejs/NuxtJS

Question

我已经在我的 NuxtJs 应用程序上安装了 AG-Grid 社区插件。一切都很好，但我卡在如何让单元格渲染器上的按钮执行方法上定义的功能上。

这是我到目前为止所做的：

index.vue

<template>
   <div>
       <ag-grid-vue style="width: 100%; height: 500px;" class="ag-theme-alpine"
            :columnDefs="columnDefs" @grid-ready="onGridReady" :defaultColDef="defaultColDef"
            :rowData="rowData" :rowHeight="rowHeight">
       </ag-grid-vue>
   </div>
</template>

 <script>
   export default {
     data() {
        return {
          columnDefs: [{
             field: 'scope',
             resizable: true,
             sortable: true,
             headerName: 'Name',
          },
          {
             field: 'scope',
             resizable: true,
             sortable: true,
             headerName: 'Age',
          },
          {
             field: 'scope',
             resizable: true,
             sortable: true,
             headerName: 'Delete',
             cellRenderer(params) {
               return '<button @click="deleteLog(id)" type="button">Delete</button>'
             }
          }]
          ....
        }
      }
   },

   async deleteLog(id) {
    if (confirm("Do you really wish to delete this person?")) {
      const token = localStorage.getItem('token');
      await this.$axios.patch(`/v1/delete/${id}/`, {
        headers: {
          Authorization: `Bearer ${token}`
        },
        deleted: true
      }).then(() => {
        this.$router.app.refresh()
      }).catch(error => {
        this.errors = error.response.data.errors;
      })
    }
  }
 </script>

我的 table 使用按钮正确呈现，但我无法 select 或单击按钮来执行我的 deleteLog 功能。任何解决问题的帮助将不胜感激。

Answer 1

我能够通过创建按钮单元格渲染器组件并使用 Vue.extend

扩展它来解决问题

components/btn-cell-renderer.vue

<template>
  <span>
    <button @click="btnClickedHandler()"> </button>
  </span>
</template>

<script>
  import Vue from "Vue";
  export default Vue.extend ({
    name: 'BtnCellRenderer',
    mounted() {
    },
    methods: {
     // Write your function here
    },
  });
</script>

然后我导入了组件并在 index.vue

上添加了一些更改

Index.vue

<template>
   <div>
       <ag-grid-vue style="width: 100%; height: 500px;" class="ag-theme-alpine"
            :columnDefs="columnDefs" @grid-ready="onGridReady" :defaultColDef="defaultColDef"
            :rowData="rowData" :rowHeight="rowHeight" :frameworkComponents="frameworkComponents">
       </ag-grid-vue>
   </div>
</template>

<script>

import BtnCellRenderer from "~/components/btn-cell-renderer.vue"

export default{ 
   component : {
     BtnCellRenderer
   },
   
   data() {
    return {
      columnDefs: [{
         field: 'scope',
         resizable: true,
         sortable: true,
         headerName: 'Name',
      },
      {
         field: 'scope',
         resizable: true,
         sortable: true,
         headerName: 'Age',
      },
      {
         field: 'scope',
         resizable: true,
         sortable: true,
         headerName: 'Delete',
         cellRenderer: "btnCellRenderer",
         cellRendererParams: {
          clicked(field) {
            alert(`deleted`);
           }
         },
      
      }]
      ....
    }
  }
 },

....

beforeMount() {
  this.frameworkComponents = {
    btnCellRenderer: BtnCellRenderer,
  };
},

}

</script>

在 AG-Grid table 个单元格内单击按钮时执行功能 - Vuejs/NuxtJS

Execute functions on button click inside AG-Grid table cells - Vuejs/NuxtJS

vue.js

ag-grid

vuejs2

nuxt.js

ag-grid-vue