The pageSize property is 10 but only 7 records can be displayed after adding the 'groupField' attribute.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>EasyUI for Vue</title>
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/icon.css">
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/color.css">
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/vue.css">
<script src="http://www.jeasyui.com/node_modules/vx-easyui/vue.min.js"></script>
<script src="http://www.jeasyui.com/node_modules/vx-easyui/babel-polyfill.js"></script>
<script src="http://www.jeasyui.com/node_modules/vx-easyui/vx-easyui-min.js"></script>
<script src="http://www.jeasyui.com/node_modules/vx-easyui/babel.min.js"></script>
<style type="text/css">
body{
padding: 20px;
}
h2{
margin: 0 0 20px 0;
}
.mycontainer{
min-width: 700px;
}
</style>
</head>
<body>
<div id="app"></div>
<script type="text/babel">
var demopagination2={
template: `
<div>
<h2>Pagination - Lazy Load</h2>
<div style="margin-bottom:10px">
<Label for="c1">Pager on: </Label>
<ComboBox inputId="c1" style="width:120px"
:data="pageOptions"
v-model="pagePosition"
:editable="false"
:panelStyle="{height:'auto'}">
</ComboBox>
</div>
<DataGrid style="height:450px"
:pagination="true"
:lazy="true"
:data="data"
:total="total"
:loading="loading"
:pageNumber="pageNumber"
:pageSize="pageSize"
groupField="group"
:pagePosition="pagePosition"
:pageLayout="['list','sep','first','prev','num','tpl','next','last','refresh','info']"
@pageChange="onPageChange($event)">
<GridColumn field="inv" title="Inv No"></GridColumn>
<GridColumn field="name" title="Name"></GridColumn>
<GridColumn field="amount" title="Amount" align="right">
<template slot="body" slot-scope="scope">
<ComboBox
@filterChange="$refs.d1.closed=false"
class="f-full"
inputId=amount
:data='[
{ value: 11, text: "Mr. Nice" },
{ value: 12, text: "Narco" },
{ value: 13, text: "Bombasto" },
{ value: 14, text: "Celeritas" },
{ value: 15, text: "Magneta" },
{ value: 16, text: "RubberMan" },
{ value: 17, text: "Dynama" },
{ value: 18, text: "Dr IQ" },
{ value: 19, text: "Magma" },
{ value: 20, text: "Tornado" }
]'
>
</ComboBox>
</template>
</GridColumn>
<GridColumn field="price" title="Price" align="right"></GridColumn>
<GridColumn field="cost" title="Cost" align="right"></GridColumn>
<GridColumn field="note" title="Note"></GridColumn>
<template slot="group" slot-scope="scope" >
<span style="font-weight:bold">
{{scope.value}}
</span>
</template>
</DataGrid>
<Dialog ref="d1"
:title="' 新增'"
iconCls="icon-add"
:dialogStyle="{width:'400px',height:'200px'}"
:modal="true"
:closable="true"
:closed="true"
>
<Panel :bodyStyle="{padding:'20px'}" style="height:160px">
<p>Panel Content.</p>
<template slot="footer">
<div style="padding:5px">
<LinkButton iconCls="icon-add">新增</LinkButton>
</div>
</template>
</Panel>
</Dialog>
</div>
`,
/*$refs.d1.closed=false*/
data() {
return {
total: 0,
pageNumber: 1,
pageSize: 10,
data: [],
loading: false,
pagePosition: "bottom",
pageOptions: [
{ value: "bottom", text: "Bottom" },
{ value: "top", text: "Top" },
{ value: "both", text: "Both" }
]
};
},
created() {
this.loadPage(this.pageNumber, this.pageSize);
},
methods: {
onPageChange(event) {
this.loadPage(event.pageNumber, event.pageSize);
},
loadPage(pageNumber, pageSize) {
this.loading = true;
setTimeout(() => {
let result = this.getData(pageNumber, pageSize);
this.total = result.total;
this.pageNumber = result.pageNumber;
this.data = result.rows;
this.loading = false;
}, 1000);
},
getData(pageNumber, pageSize) {
let total = 100000;
let data = [];
let start = (pageNumber - 1) * pageSize;
for (let i = start + 1; i <= start + pageSize; i++) {
let amount = Math.floor(Math.random() * 1000);
let price = Math.floor(Math.random() * 1000);
data.push({
group:'group'+i%4,
inv: "Inv No " + i,
name: "Name " + i,
amount: amount,
price: price,
cost: amount * price,
note: "Note " + i
});
}
return {
total: total,
pageNumber: pageNumber,
pageSize: pageSize,
rows: data
};
}
}
}
var app = new Vue({
el: '#app',
template: `<demopagination2 class="mycontainer"></demopagination2>`,
components: {
demopagination2:demopagination2 }
})
</script>
</body>
</html>
