提交 7af25e2b 编写于 作者: WodahsOrez's avatar WodahsOrez

update: 表格分页

上级 3fb53ccb
.grid-pagination {
height: 44px;
padding: 0 80px 0 20px;
background-color: var(--app-color-white);
display: flex;
justify-content: flex-end;
align-items: center;
gap: 15px;
color: var(--app-color-gray-100);
border-top: 1px solid var(--app-color-gray-400);
justify-content: flex-end;
padding: 39px 62px 25px 0;
color: var(--ey-color-gray-100);
// 选择分页大小
.grid-pagination-size {
width: 100px;
color: var(--ey-color-gray-100);
background: var(--ey-color-white);
&.ivu-select .ivu-select-selection {
border-radius: 4px;
border: 1px solid var(--ey-color-gray-200);
height: 30px;
min-height: 30px;
}
margin-left: 18px;
margin-right: 21px;
}
// 中间页数样式
.ivu-page {
height: 25px;
display: flex;
.ivu-page-prev,
.ivu-page-next,
.ivu-page-item {
width: 30px;
height: 30px;
min-height: 30px;
border-radius: 4px;
border-width: 0;
font-weight: bold;
background: var(--ey-color-gray-400);
&:hover a {
color: var(--ey-color-blue-green);
}
.ivu-page-simple-pager {
pointer-events: none;
&.ivu-page-disabled {
cursor: pointer;
input {
border: 0;
a {
cursor: pointer;
color: var(--ey-color-gray-100);
}
&:hover a{
color: var(--ey-color-blue-green);
}
.grid-page-pre-pro {
transform: rotate(90deg);
}
.grid-page-next-pro {
transform: rotate(-90deg);
.ivu-icon {
font-weight: bold;
}
.grid-page-pre-pro,.grid-page-next-pro {
font-size: 24px;
margin-top: -2px;
cursor: pointer;
}
.ivu-icon {
font-size: 24px;
color: var(--app-color-gray-100);
.ivu-page-item-active {
a {
color: var(--ey-color-white);
}
.grid-pagination__dropdown {
cursor: pointer;
span {
color: var(--app-color-black);
font-weight: 600;
&:hover a{
color: var(--ey-color-white);
}
background: var(--ey-color-blue-green);
}
}
// 页面跳转
.ivu-page-options-elevator {
height: 30px;
line-height: 30px;
input {
height: 30px;
width: 45px;
text-align: center;
}
input:focus {
border-color: var(--ey-color-blue-green);
box-shadow: none;
}
}
}
// 分页大小popover
.grid-pagination-size-popover {
padding: 0;
// margin: 10px 0;
height: 132px;
width: 100px;
.ivu-select-item {
color: var(--ey-color-gray-100);
border-bottom: 1px solid var(--ey-color-gray-250);
padding: 7px 16px 7px 10px;
text-align: left !important;
}
&.ivu-select-dropdown .ivu-select-dropdown-list .ivu-select-item.ivu-select-item-selected {
color: var(--ey-color-gray-100);
background-color: var(--ey-color-white);
&:hover {
color: var(--ey-color-black);
background-color: var(--ey-color-blue-green-110);
}
.ivu-icon {
margin-left: 15px;
}
.ivu-select-item:hover {
color: var(--ey-color-black);
background-color: var(--ey-color-blue-green-110);
}
}
<template>
<row class="grid-pagination">
<dropdown class="grid-pagination__dropdown" @on-click="handleSizeChange">
Show <span>{{ limit }}</span>
<icon type="ios-arrow-down"></icon>
<template #list>
<dropdownMenu>
<dropdownItem v-for="(value, index) in pageSize" :key="index" :name="value">{{ value }} 条/页</dropdownItem>
</dropdownMenu>
</template>
</dropdown>
<div class="grid-page-pre-pro">
<i class="el-icon-download"></i>
</div>
<span>&nbsp;{{ totalRow }}&nbsp;</span>
<i-select transfer-class-name="grid-pagination-size-popover" class="grid-pagination-size" :value="limit" :transfer="true" @on-change="handleSizeChange">
<i-option v-for="item in pageSize" :key="item" :value="item" style="text-align: center"
>{{ item }} 条/页</i-option
>
</i-select>
<page
class="pull-right"
:transfer="true"
:total="totalRow"
simple
size="small"
show-elevator
:current="curPage"
:page-size="limit"
@on-change="handleChange($event)"
>
</page>
<div class="grid-page-next-pro">
<i class="el-icon-download"></i>
</div>
</row>
</template>
......@@ -34,7 +23,6 @@ import { Vue, Component, Prop } from "vue-property-decorator";
@Component({})
export default class AppGridPagination extends Vue {
/**
* 总行数
*
......@@ -65,7 +53,7 @@ export default class AppGridPagination extends Vue {
* @type {Array<*>}
* @memberof AppGridPagination
*/
public pageSize= [10, 20, 30, 40, 50, 60, 70, 80, 90, 100];
public pageSize = [10, 20, 30, 40, 50, 60, 70, 80, 90, 100];
/**
* 处理当前页改变
......@@ -74,7 +62,7 @@ export default class AppGridPagination extends Vue {
* @memberof AppGridPagination
*/
public handleChange($event: any) {
this.$emit('page-change', $event);
this.$emit("page-change", $event);
}
/**
......@@ -84,7 +72,7 @@ export default class AppGridPagination extends Vue {
* @memberof AppGridPagination
*/
public handleSizeChange($event: any) {
this.$emit('page-size-change', $event);
this.$emit("page-size-change", $event);
}
}
</script>
......
Markdown 格式
0% or
您添加了 0 到此讨论。请谨慎行事。
先完成此消息的编辑!
想要评论请 注册