Skip to content

iBiz-Vue-R7-Res
iBiz-Vue-R7-Res
提交 7af25e2b 编写于 作者: WodahsOrez's avatar WodahsOrez
浏览文件
操作

update: 表格分页

上级 3fb53ccb
隐藏空白字符变更
内嵌 并排
正在显示 包含 157 行增加 和 114 行删除
src/components/app-grid-pagination/app-grid-pagination.scss
浏览文件 @ 7af25e2b
.grid-pagination { .grid-pagination {
height: 44px; display: flex;
padding: 0 80px 0 20px; align-items: center;
background-color: var(--app-color-white); justify-content: flex-end;
display: flex; padding: 39px 62px 25px 0;
justify-content: flex-end; color: var(--ey-color-gray-100);
align-items: center; // 选择分页大小
gap: 15px; .grid-pagination-size {
color: var(--app-color-gray-100); width: 100px;
border-top: 1px solid var(--app-color-gray-400); color: var(--ey-color-gray-100);
.ivu-page { background: var(--ey-color-white);
height: 25px; &.ivu-select .ivu-select-selection {
display: flex; border-radius: 4px;
border: 1px solid var(--ey-color-gray-200);
height: 30px;
min-height: 30px;
} }
.ivu-page-simple-pager { margin-left: 18px;
pointer-events: none; margin-right: 21px;
}
// 中间页数样式
.ivu-page {
.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-disabled {
cursor: pointer; cursor: pointer;
input { a {
border: 0; cursor: pointer;
color: var(--ey-color-gray-100);
} }
&:hover a{
color: var(--ey-color-blue-green);
}
}
.ivu-icon {
font-weight: bold;
}
} }
.grid-page-pre-pro { .ivu-page-item-active {
transform: rotate(90deg); a {
} color: var(--ey-color-white);
.grid-page-next-pro { }
transform: rotate(-90deg); &:hover a{
color: var(--ey-color-white);
}
background: var(--ey-color-blue-green);
} }
.grid-page-pre-pro,.grid-page-next-pro { }
font-size: 24px;
margin-top: -2px; // 页面跳转
cursor: pointer; .ivu-page-options-elevator {
height: 30px;
line-height: 30px;
input {
height: 30px;
width: 45px;
text-align: center;
} }
.ivu-icon { input:focus {
font-size: 24px; border-color: var(--ey-color-blue-green);
color: var(--app-color-gray-100); box-shadow: none;
} }
.grid-pagination__dropdown { }
cursor: pointer; }
span {
color: var(--app-color-black); // 分页大小popover
font-weight: 600; .grid-pagination-size-popover {
} padding: 0;
.ivu-icon { // margin: 10px 0;
margin-left: 15px; 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);
} }
} }
\ No newline at end of file .ivu-select-item:hover {
color: var(--ey-color-black);
background-color: var(--ey-color-blue-green-110);
}
}
src/components/app-grid-pagination/app-grid-pagination.vue
浏览文件 @ 7af25e2b
<template> <template>
<row class="grid-pagination"> <row class="grid-pagination">
<dropdown class="grid-pagination__dropdown" @on-click="handleSizeChange"> <span>共&nbsp;{{ totalRow }}&nbsp;条</span>
Show <span>{{ limit }}</span> <i-select transfer-class-name="grid-pagination-size-popover" class="grid-pagination-size" :value="limit" :transfer="true" @on-change="handleSizeChange">
<icon type="ios-arrow-down"></icon> <i-option v-for="item in pageSize" :key="item" :value="item" style="text-align: center"
<template #list> >{{ item }} 条/页</i-option
<dropdownMenu> >
<dropdownItem v-for="(value, index) in pageSize" :key="index" :name="value">{{ value }} 条/页</dropdownItem> </i-select>
</dropdownMenu> <page
</template> class="pull-right"
</dropdown> :total="totalRow"
<div class="grid-page-pre-pro"> show-elevator
<i class="el-icon-download"></i> :current="curPage"
</div> :page-size="limit"
<page @on-change="handleChange($event)"
class="pull-right" >
:transfer="true" </page>
:total="totalRow" </row>
simple
size="small"
: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> </template>
<script lang="ts"> <script lang="ts">
...@@ -34,58 +23,57 @@ import { Vue, Component, Prop } from "vue-property-decorator"; ...@@ -34,58 +23,57 @@ import { Vue, Component, Prop } from "vue-property-decorator";
@Component({}) @Component({})
export default class AppGridPagination extends Vue { export default class AppGridPagination extends Vue {
/**
* 总行数
*
* @type {number}
* @memberof AppGridPagination
*/
@Prop() totalRow!: number;
/** /**
* 总行数 * 当前页
* *
* @type {number} * @type {number}
* @memberof AppGridPagination * @memberof AppGridPagination
*/ */
@Prop() totalRow!: number; @Prop() curPage!: number;
/** /**
* 当前页 * 分页大小
* *
* @type {number} * @type {number}
* @memberof AppGridPagination * @memberof AppGridPagination
*/ */
@Prop() curPage!: number; @Prop() limit!: number;
/** /**
* 分页大小 * 分页数数组
* *
* @type {number} * @type {Array<*>}
* @memberof AppGridPagination * @memberof AppGridPagination
*/ */
@Prop() limit!: number; public pageSize = [10, 20, 30, 40, 50, 60, 70, 80, 90, 100];
/** /**
* 分页数数组 * 处理当前页改变
* *
* @type {Array<*>} * @type {number}
* @memberof AppGridPagination * @memberof AppGridPagination
*/ */
public pageSize= [10, 20, 30, 40, 50, 60, 70, 80, 90, 100]; public handleChange($event: any) {
this.$emit("page-change", $event);
}
/** /**
* 处理当前页改变 * 处理分页大小改变
* *
* @type {number} * @type {number}
* @memberof AppGridPagination * @memberof AppGridPagination
*/ */
public handleChange($event: any) { public handleSizeChange($event: any) {
this.$emit('page-change', $event); this.$emit("page-size-change", $event);
} }
/**
* 处理分页大小改变
*
* @type {number}
* @memberof AppGridPagination
*/
public handleSizeChange($event: any) {
this.$emit('page-size-change', $event);
}
} }
</script> </script>
......
Markdown 格式
0% or
您添加了 0 人 到此讨论。请谨慎行事。
先完成此消息的编辑！
想要评论请 注册 或