Web Demo Mobile Demo Angular Demo Vue Demo React Demo
源代码
<template>
	<div>
		<h2>Row Group - Pagination</h2>
		<DataGrid style="height:250px"
        groupField="group"
				:pagination="true"
				:data="data"
				:total="total"
				:pageSize="pageSize"
        :pageLayout="pageLayout"
    >
			<GridColumn field="inv" title="Inv No"></GridColumn>
			<GridColumn field="name" title="Name"></GridColumn>
			<GridColumn field="amount" title="Amount" align="right"></GridColumn>
			<GridColumn field="price" title="Price" align="right"></GridColumn>
			<GridColumn field="cost" title="Cost" align="right"></GridColumn>
			<GridColumn field="note" title="Note"></GridColumn>
		</DataGrid>
	</div>
</template>

<script>
export default {
  data() {
    return {
      total: 100,
      pageSize: 20,
      pageLayout: ['first','prev','next','last','info'],
      data: []
    };
  },
  created() {
    this.data = this.getData(this.total);
  },
  methods: {
    getData(total) {
      let data = [];
      for (let i = 1; i <= total; i++) {
        let amount = Math.floor(Math.random() * 1000);
        let price = Math.floor(Math.random() * 1000);
        data.push({
          group: 'group'+(i%10),
          inv: "Inv No " + i,
          name: "Name " + i,
          amount: amount,
          price: price,
          cost: amount * price,
          note: "Note " + i
        });
      }
      return data;
    }
  }
};
</script>