Блог

Используя компонент SyncFusion Vue Grid, мне нужно вызвать функцию при выборе строки. Я попытался добавить столбец кнопок редактирования, но не могу найти документацию по правильному синтаксису, который можно использовать, чтобы заставить кнопки вызывать функцию. Я также пытался найти способ просто вызывать функцию всякий раз, когда щелкается сама строка, что было бы хорошо, если я могу определить, какая строка была нажата (получить доступ к значению одного из полей в строке). API выбора сетки выглядит так, как будто он предназначен только для программного выбора частей сетки, что я не пытаюсь сделать. Я попытался следовать этому объяснению, но я не мог понять синтаксис для получения кнопки для вызова функции. Я просмотрел документацию 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>
  

Ваше требование может быть выполнено с помощью события rowSelected сетки. Это событие запускается при выборе строки сетки и возвращает сведения о текущей строке в аргументах события.

Пожалуйста, ознакомьтесь с приведенным ниже примером, подготовленным на основе этого, для справки,

Пример: https://codesandbox.io/s/vue-forked-0knlb?file=/src/App.vue

Ссылка на API: https://ej2.syncfusion.com/vue/documentation/api/grid/#rowselected

Дайте нам знать, если вам нужна дополнительная помощь.

С уважением,

Sujith R