123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111 |
- <template>
- <el-pagination
- class="cip-pagination"
- :class="{'cip-pagination__compact':compact}"
- :background="background"
- @size-change="handleSizeChange"
- @current-change="handlePageChange"
- :layout="layout"
- :total="total"
- :current-page="currentPage"
- :page-sizes="usingPageSizes"
- :page-size="limit"
- :hide-on-single-page="hideOnSinglePage"
- />
- </template>
- <script>
- import { defineComponent, computed } from 'vue'
- import { ElPagination } from 'element-plus'
- import { useCipConfig } from '../hooks/use-cip-config'
- import { getUsingConfig } from '@cip/utils/util'
- import { generateProps, generateEmits } from '../helper/component-util'
- import { componentScheme } from './component.scheme'
- export default defineComponent({
- name: 'CipPagination',
- components: { ElPagination },
- props: generateProps(componentScheme),
- emits: generateEmits(componentScheme),
- setup (props, context) {
- // 每页条数变化事件
- const handleSizeChange = (size) => {
- const offset = 0 // (props.currentPage - 1) * size
- context.emit('update:limit', size)
- context.emit('update:offset', offset)
- context.emit('refresh')
- }
- // 当前页变化事件
- const handlePageChange = (page) => {
- const offset = (page - 1) * props.limit
- context.emit('update:offset', offset)
- context.emit('refresh', offset)
- }
- // 样式模式
- const cipConfig = useCipConfig()
- const usingPageSizes = computed(() => {
- return getUsingConfig(props.pageSizes, cipConfig.pageSizes)
- })
- const compact = computed(() => {
- return cipConfig.paginationCompact ?? ''
- })
- return {
- handleSizeChange,
- handlePageChange,
- compact,
- usingPageSizes
- }
- }
- })
- </script>
- <style lang="less">
- // el-pagination 组件样式与数据中台统一
- // el-pagination 紧凑型样式(数据中台)
- .cip-pagination{
- // element-plus2 将el-pagination设置为flex导致起宽度变为100%无法使用 text-align对其进行位置控制将其设置为inline-flex
- display: inline-flex;
- .btn-prev,.btn-next{
- i{
- margin: 0 auto;
- }
- }
- }
- .cip-pagination__compact{
- &.@{elNamespace}-pagination.is-background{
- .btn-prev,.btn-next{
- margin: 0;
- background: #fff;
- }
- .btn-prev{
- border: 1px solid rgb(217, 217, 217);
- border-right:none;
- border-radius: 0;
- }
- .btn-next{
- border: 1px solid rgb(217, 217, 217);
- border-radius: 0;
- }
- .@{elNamespace}-pager li:not(.disabled).number.active{
- background: #ecf5ff;
- color: @primary;
- }
- .@{elNamespace}-pager li.more{
- background: #fff;
- border: 1px solid rgb(217, 217, 217);
- border-right:none;
- border-radius: 0;
- margin: 0;
- color: #a6a6a6;
- }
- .@{elNamespace}-pager{
- .number{
- background: #fff;
- border: 1px solid rgb(217, 217, 217);
- border-right:none;
- border-radius: 0;
- margin: 0;
- color: #a6a6a6;
- }
- }
- }
- }
- </style>
|