分页

## Pagination 分页
基于 ElementUI Pagination 分页组件， 采用分页的形式分隔多条数据，每次只加载一个页面。

### 何时使用
当加载/渲染所有数据将花费很多时间时。
可切换页码浏览数据。

### 代码演示
<div class="textDiv">

![](/media/202404/2024-04-30_101757_328832.png)

------------
默认分页。

------------
代码示例如下
```html
<template>

<hi-pagination :total="total" :page-size="pageSize" layout="sizes,prev,pager, next,total" :current-page.sync="pageIndex" ></hi-pagination>

</template>
<script>
  export default {
    data(){
      return {
        pageSize:15,
        total:33,
        pageIndex:2
      }
    }
  }
</script>
```

</div>

### 与数据集绑定
<div class="textDiv">

![](/media/202404/2024-04-30_101543_378303.png)

------------
绑定 `target`。

------------
代码示例如下
```html
<template>
    <div v-if="dataset1">
      <hi-pagination layout="sizes, prev, pager, next,total" :page-size.sync="dataset1.pageSize" current-page.sync="dataset1.pageIndex" :total="dataset1.total" :target="dataset1"></hi-pagination>
    </div>
</template>
<script>
  export default {
    data(){
      return {
        dataset1:null,
        datasetCfg:{
    id:"OrderEntity",
    pageSize:2,
    modelFile: "purchase/order/dataset/OrderEntity.xml",
    action:"autoAction",
    sortFields: [
        "FID",
        "FNUMBER",
        "FSUPPLIER",
        "FNOTE",
        "FARRIVALSTATE",
        "FAUDIT",
        "FUSERID",
        "FCREATEDATE",
    ],
    fields: {
        FID: {
            name: "FID", //字段ID
            label: "ID", //字段描述
            dbtype: "dbString", //数据类型

},
        FNUMBER: {
            name: "FNUMBER", //字段ID
            label: "单号", //字段描述
            dbtype: "dbString", //数据类型
            required: true,
     
            length: 50,
            rules: [],

},
        FUSERID: {
            name: "FUSERID", //字段ID
            label: "用户", //字段描述
            dbtype: "dbString", //数据类型
            required: true,
            readonly: true,
            length: 50,

},
        FCREATEDATE: {
            name: "FCREATEDATE", //字段ID
            label: "创建时间", //字段描述
            dbtype: "dbDate", //数据类型
            required: true,
            readonly: true,

},
        FSUPPLIER: {
            name: "FSUPPLIER", //字段ID
            label: "供应商", //字段描述
            dbtype: "dbString", //数据类型
            required: true,

},
        FNOTE: {
            name: "FNOTE", //字段ID
            label: "备注", //字段描述
            dbtype: "dbString", //数据类型
            length: 250,
        },
        FARRIVALSTATE: {
            name: "FARRIVALSTATE", //字段ID
            label: "到货情况", //字段描述
            dbtype: "dbString", //数据类型
        }, FAUDIT: {
            name: "FAUDIT", //字段ID
            label: "审核", //字段描述
            dbtype: "dbInt", //数据类型
        },

}
  }
        }
      },

methods: {
      
    },
    mounted() {
        this.dataset1 = this.$dsContainer.createDataSet(this.datasetCfg);

},
  };
</script>
```

</div>

### 事件绑定
<div class="textDiv">

![](/media/202404/2024-04-30_101923_790637.png)

------------
绑定 分页前`beginturnpage`,分页后 `afterturnpage` 事件。

------------
代码示例如下
```html
<template>

<hi-pagination  ref="pager1" :page-size="20" @current-change="currentChange" @next-click="nextClick" :total="999"></hi-pagination>

</template>
<script>
  export default {
    
    methods: {
      currentChange(pageIndex) {
  
        alert(`页索引改变,${pageIndex}页`);
      },
      nextClick(pageIndex){
        alert(`下一页,第${pageIndex}页`);
      }
    }
  };
</script>
```

</div>

### Attributes

| 参数     | 说明   | 类型     | 可选值 | 默认值 |
|--------|------|--------|-----|-----|
| target | 分页目标 | Object | —   |     |

### Events

| 事件名称          | 说明                 | 回调参数 |
|---------------|--------------------|------|
| currentChange | currentPage 改变时会触发 | 当前页  |

</style>