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

【问题标题】：How to call a function when a SyncFusion grid row is selected选择 SyncFusion 网格行时如何调用函数
【发布时间】：2020-11-06 01:38:35
【问题描述】：

使用 SyncFusion Vue Grid 组件，我需要在选择一行时调用一个函数。我尝试添加一列编辑按钮，但我找不到正确语法的文档，用于让按钮调用函数。我还尝试寻找一种在单击行本身时调用函数的方法，只要我可以确定单击了哪一行（访问该行中一个字段的值）就可以了。 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>

【问题讨论】：

标签： vue.js datagrid syncfusion ej2-syncfusion

【解决方案1】：

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

请在此基础上找到以下示例供您参考，

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

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

如果您需要进一步的帮助，请告诉我们。

问候，

苏吉斯·R

【讨论】：