Vue 2、Syncfusion Grid、类组件中不显示分页答案

【问题标题】：Paging not displayed in Vue 2, Syncfusion Grid, class componentVue 2、Syncfusion Grid、类组件中不显示分页
【发布时间】：2024-04-28 05:25:01
【问题描述】：

我正在尝试使用 TypeScript 将分页添加到 Vue 2 项目中的类组件中的 Syncfusion Grid。我在 main.ts 中使用“Vue.use”-ing GridPlugin。

我的理解是我必须：

从 ej2-vue-grids 导入 Page 类
提供一个名为 grid 的服务，该服务将 Page 类包含在一个数组中
设置 allowPaging="true" 并提供 pageSettings

pageSettings 显然正在应用，因为如果我将其省略，它会显示所有行。

这是我的精简代码：

<template>
  <ejs-grid
    :data-source="data"
    :allow-paging="true"
    :page-settings="pageSettings"
  >
  </ejs-grid>
</template>

<script lang="ts">
import { Component, Provide, Vue } from "vue-property-decorator";
import { Page } from "@syncfusion/ej2-vue-grids";

@Component
export default class Organizations extends Vue {
  @Provide("grid") private grid = [Page];

  data = [
    { ID: 1, Name: "Widget 1" },
    { ID: 2, Name: "Widget 2" },
    { ID: 3, Name: "Widget 3" },
    { ID: 4, Name: "Widget 4" },
    { ID: 5, Name: "Widget 5" },
    { ID: 6, Name: "Widget 6" },
    { ID: 7, Name: "Widget 7" },
    { ID: 8, Name: "Widget 8" },
    { ID: 9, Name: "Widget 9" },
    { ID: 10, Name: "Widget 10" },
  ];
  pageSettings = { pageSize: 5 };
}
</script>

【问题讨论】：

标签： typescript vue.js vuejs2 syncfusion

【解决方案1】：

我在Syncfusion forum找到了答案。

类组件提供页面的技巧是使用@Component 属性中的选项语法：

@Component({
  provide: {
    grid: [Page]
  }
})
export default class Organizations extends Vue {

【讨论】：

【解决方案2】：

根据您的要求，您需要将分页应用于网格。为了满足您的要求，我们准备了一个示例，通过在网格中呈现分页。

<template>    
  <div>
<ejs-grid ref="grid" id="grid" :dataSource="data" height="100%" :allowPaging="true"
  :pageSettings="pageSettings" >
………………………………………..
</ejs-grid>
 </div>
</template>

<script>
import Vue from "vue";
import { GridPlugin, Page } from "@syncfusion/ej2-vue-grids";
import { Browser } from "@syncfusion/ej2-base";
import { data } from "./datasource";

Vue.use(GridPlugin);

export default Vue.extend({
data: () => {
return {
  data: data,
  pageSettings: { pageSize: 5 },
};},
  methods: {},
  provide: {
 grid: [Page],
},});
</script>

示例：https://codesandbox.io/s/admiring-pare-erxy2?file=/src/App.vue

【讨论】：