mirror of
https://github.com/element-plus/element-plus.git
synced 2025-08-14 10:00:58 +08:00
2f17df1209
* perf: change to import-x * feat: add rules * chore: fix rule * chore: fix * chore: fix * chore: fix * style: `pnpm lint:fix` * Revert "style: `pnpm lint:fix`" This reverts commit db0116a288299c507e3cfc4d7a22e2207265d920. * Revert "chore: fix" This reverts commit 69c82a90c01525e38180be4c21e8ef5602512318. * chore: fix * style: `pnpm lint:fix` * fix: lint * chore: `pnpm format`
112 lines
3.0 KiB
Vue
112 lines
3.0 KiB
Vue
<template>
|
|
<div class="flex items-center mb-4">
|
|
<el-radio-group v-model="size" class="mr-4">
|
|
<el-radio-button value="default">default</el-radio-button>
|
|
<el-radio-button value="large">large</el-radio-button>
|
|
|
|
<el-radio-button value="small">small</el-radio-button>
|
|
</el-radio-group>
|
|
<div>
|
|
background:
|
|
<el-switch v-model="background" class="ml-2" />
|
|
</div>
|
|
<div class="ml-4">
|
|
disabled: <el-switch v-model="disabled" class="ml-2" />
|
|
</div>
|
|
</div>
|
|
|
|
<hr class="my-4" />
|
|
|
|
<div class="demo-pagination-block">
|
|
<div class="demonstration">Total item count</div>
|
|
<el-pagination
|
|
v-model:current-page="currentPage1"
|
|
:page-size="100"
|
|
:size="size"
|
|
:disabled="disabled"
|
|
:background="background"
|
|
layout="total, prev, pager, next"
|
|
:total="1000"
|
|
@size-change="handleSizeChange"
|
|
@current-change="handleCurrentChange"
|
|
/>
|
|
</div>
|
|
<div class="demo-pagination-block">
|
|
<div class="demonstration">Change page size</div>
|
|
<el-pagination
|
|
v-model:current-page="currentPage2"
|
|
v-model:page-size="pageSize2"
|
|
:page-sizes="[100, 200, 300, 400]"
|
|
:size="size"
|
|
:disabled="disabled"
|
|
:background="background"
|
|
layout="sizes, prev, pager, next"
|
|
:total="1000"
|
|
@size-change="handleSizeChange"
|
|
@current-change="handleCurrentChange"
|
|
/>
|
|
</div>
|
|
<div class="demo-pagination-block">
|
|
<div class="demonstration">Jump to</div>
|
|
<el-pagination
|
|
v-model:current-page="currentPage3"
|
|
v-model:page-size="pageSize3"
|
|
:size="size"
|
|
:disabled="disabled"
|
|
:background="background"
|
|
layout="prev, pager, next, jumper"
|
|
:total="1000"
|
|
@size-change="handleSizeChange"
|
|
@current-change="handleCurrentChange"
|
|
/>
|
|
</div>
|
|
<div class="demo-pagination-block">
|
|
<div class="demonstration">All combined</div>
|
|
<el-pagination
|
|
v-model:current-page="currentPage4"
|
|
v-model:page-size="pageSize4"
|
|
:page-sizes="[100, 200, 300, 400]"
|
|
:size="size"
|
|
:disabled="disabled"
|
|
:background="background"
|
|
layout="total, sizes, prev, pager, next, jumper"
|
|
:total="400"
|
|
@size-change="handleSizeChange"
|
|
@current-change="handleCurrentChange"
|
|
/>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { ref } from 'vue'
|
|
|
|
import type { ComponentSize } from 'element-plus'
|
|
|
|
const currentPage1 = ref(5)
|
|
const currentPage2 = ref(5)
|
|
const currentPage3 = ref(5)
|
|
const currentPage4 = ref(4)
|
|
const pageSize2 = ref(100)
|
|
const pageSize3 = ref(100)
|
|
const pageSize4 = ref(100)
|
|
const size = ref<ComponentSize>('default')
|
|
const background = ref(false)
|
|
const disabled = ref(false)
|
|
|
|
const handleSizeChange = (val: number) => {
|
|
console.log(`${val} items per page`)
|
|
}
|
|
const handleCurrentChange = (val: number) => {
|
|
console.log(`current page: ${val}`)
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.demo-pagination-block + .demo-pagination-block {
|
|
margin-top: 10px;
|
|
}
|
|
.demo-pagination-block .demonstration {
|
|
margin-bottom: 16px;
|
|
}
|
|
</style>
|