选择SyncFusion网格行时如何调用函数

问题描述

使用SyncFusion Vue的网格部件，我需要时选择的行，以调用一个函数。我尝试添加一列编辑按钮，但是找不到用于获取按钮以调用函数的正确语法的文档。我还尝试寻找一种方法，只要单击行本身就可以调用函数，这很好，只要我可以确定单击了哪一行（访问该行中某个字段的值）即可。 Grid Selection API看起来只是用于以编程方式选择网格的一部分，而这并不是我要尝试的。我尝试遵循this explanation，但无法弄清楚获取按钮以调用函数的语法。我看过Vue和SyncFusion文档，但找不到我要尝试做的事情。以下是代码的相关部分。

<template>
<ejs-grid>
    <e-columns>
        <e-column
            headerText='Buttons'
            width='120'
           :template='cTemplate'></e-column>
        <e-column
            field="name"
            headerText="Name"
            :isPrimaryKey="true"
            width="60"
            ></e-column>
        <e-column
            field="generalSubject"
            headerText="Subject"
            width="40"
            ></e-column>
    </e-columns>
</ejs-grid>
</template>

<script>
export default Vue.extend({  
  data() {
    cTemplate: function () { 
        return { template : Vue.component('columnTemplate',{ 
            template: `<button v-on:click="fx">Edit</button>`,// <-- call fx() Syntax??
                data: function() { 
                    return { 
                        data: {} 
                    } 
                },})}
    },fx: function() { // do something },},});
</script>

解决方法

您可以通过使用Grid的rowSelected事件来满足您的要求。选择网格行会触发此事件，并在事件参数中返回当前行的详细信息。

请找到以下以此为准的样品供参考，

示例： https://codesandbox.io/s/vue-forked-0knlb?file=/src/App.vue

API链接： https://ej2.syncfusion.com/vue/documentation/api/grid/#rowselected

让我们知道您是否需要进一步的帮助。

此致

Sujith R