执行功能在按钮上单击Ag -Grid表单元格 - 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>

我的表与按钮正确渲染，但我无法选择或单击按钮执行我的DeletElog函数。任何解决方案的帮助将不胜感激。

Answer 1

我能够通过创建一个按钮单元格组件来解决问题，并使用vue.extend

组件/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>

然后，我导入了该组件并在索引上增加了很少的更改。 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>