mirror of
https://gitee.com/element-plus/element-plus.git
synced 2024-12-04 20:27:44 +08:00
a8a2298a6d
* fix(components): [table] closed #11023 * fix(components): add component prop 'size' and related style supplement BREAKING CHANGE : size closed #16830 * Update component documentation * Update documentation and tests * Optimized using useFormSize * Keep the 'small' api for now * Eliminate unwanted code * Eliminate the impact of errors * Remove 'ref' * Update docs/examples/pagination/more-elements.vue Co-authored-by: qiang <qw13131wang@gmail.com> * Modify documents and declarations * Eliminate uselessness * Update packages/components/pagination/src/pagination.ts Co-authored-by: kooriookami <38392315+kooriookami@users.noreply.github.com> * Update docs/en-US/component/pagination.md Co-authored-by: kooriookami <38392315+kooriookami@users.noreply.github.com> * Update packages/components/pagination/src/pagination.ts Co-authored-by: kooriookami <38392315+kooriookami@users.noreply.github.com> * Adjust public access * pass Lint * Modify attribute acquisition * change the source of 'size' * remove `pagination-font-size-large` * Lift response * Update packages/theme-chalk/src/common/var.scss Co-authored-by: kooriookami <38392315+kooriookami@users.noreply.github.com> * Update pagination.ts * Update docs/examples/pagination/more-elements.vue --------- Co-authored-by: yang <29636098325@qq.com> Co-authored-by: qiang <qw13131wang@gmail.com> Co-authored-by: kooriookami <38392315+kooriookami@users.noreply.github.com> Co-authored-by: btea <2356281422@qq.com>
109 lines
3.0 KiB
Vue
109 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>
|