Kendo-Vue隐藏按钮在列中？

<template>
  <div>
    <kendo-grid :data-items="gridData">
      <kendo-grid-column field="name" title="Name"></kendo-grid-column>
      <kendo-grid-column title="Actions">
        <template #default="props">
          <button v-if="props.dataItem.showButton" @click="handleButtonClick(props.dataItem)">Edit</button>
        </template>
      </kendo-grid-column>
    </kendo-grid>
  </div>
</template>

<script>
import { Grid, GridColumn } from '@progress/kendo-vue-grid';

export default {
  components: {
    Grid,
    GridColumn
  },
  data() {
    return {
      gridData: [
        { name: 'John', showButton: true },
        { name: 'Jane', showButton: false },
        { name: 'Bob', showButton: true }
      ]
    };
  },
  methods: {
    handleButtonClick(dataItem) {
      // 处理按钮点击事件
    }
  }
};
</script>