Vue 2、Syncfusion Grid、类组件中未显示分页

Question

我打算使用TypeScript在Vue 2项目的类组件中向Syncfusion Grid添加分页。我是"；Vue.use"-在main.ts.中使用GridPlugin

我的理解是我必须：

1. 从ej2-vue网格导入Page类
2. 提供一个名为grid的服务，该服务在数组中包含Page类
3. 设置allowPaging＝"；真"；和供应页面设置

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>

Answer 1

我在Syncfusion论坛上找到了答案。

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

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

Answer 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