<script setup>
  import  ViewPagin from './index.vue'
 
</script>

# 分页
<ClientOnly>
  <ViewPagin/>
</ClientOnly>

## 基础用法


## 介绍

- `total`: 必须。总数。
- `value`: 必须。当前页码。
- `change`: 必须。改变分页的事件。
- `selectKeys`: 可选。被选中多少条数据，不传递此参数不展示 以选择xx条数据
- `noTotal`: 可选。没有左侧数据
- `className`: 可选。样式


## 完整代码如下：

<div class="options-api" style="font-size:14px;">

```vue
<template>
  <div>
     <h3> 有已经选中数据</h3>
      <ks-pagin 
        :total="total" 
        :selectKeys='selectKeys' 
        :value="current"
        @change="onChange" 
      />
      <h3> 没有已经选中数据</h3>
      <ks-pagin 
        :total="total" 
        :value="current"
        @change="onChange" 
      />
      <h3> 无左侧数据</h3>
        <ks-pagin 
          className='zy-demo'
          :total="total" 
          noTotal
          :value="current"
          @change="onChange" 
        />
  </div>
</template>
<script setup>
import { ref,reactive } from "vue";
// import { KsSearch,KsPagin } from '@ksconsole/components'
const current = ref(1)
const total = ref(100)
const selectKeys = ref([])
const onChange = () => {
}

</script>

<style scoped lang='less'>
.app-add {
  margin-right: 10px;
}
</style>

```

</div>
