表格部分
<a-table
:row-selection="rowSelection"
:columns="columns"
:data-source="data"
class="components-table-demo-nested"
@change="onChangeTable"
:scroll="{ x:1600 ,y:500}"
:pagination="pagination"
:locale="locale"
>
</a-table>
2.分页
<div class="paginationBox">
<span
style="float:left;margin-top:5px;font-size:14px;
font-family:PingFangSC-Regular,PingFang SC;
font-weight:400;
color:rgba(144,151,167,1)"
>共{{total}}项</span>
<a-pagination
show-less-items
class="pagination"
show-quick-jumper
show-size-changer
v-model="pagination.current"
:page-size.sync="pagination.pageSize"
:total="total"
@change="onChangePagination"
@showSizeChange="onShowSizeChange"
/>
</div>
3.data中的数据
total: 100,
pagination: {
// 分页
simple: false,
current: 1,
total: 0,
pageSize: 10
},
4.某个方法
// 任务文件搜索
handleSearchInput(value) {
this.searchObj.pageNum = 1;
this.pagination.current = 1;
if (value.trim()) {
this.searchObj.taskNameOrFileName = value.trim();
} else {
this.searchObj.taskNameOrFileName = null;
}
this.getMyDownloadList();
},
5.分页
// 点击分页
onChangePagination(current) {
this.searchObj.pageNum = current;
this.pagination.current = current;
this.getMyDownloadList();
},
// 点击分页尺寸
onShowSizeChange(current, pageSize) {
this.searchObj.pageSize = pageSize;
this.searchObj.pageNum = current;
this.pagination.current = current;
this.pagination.pageSize = pageSize;
this.getMyDownloadList();
}
6.样式 隐藏原来的table自带的分页
<style lang="less">
/deep/.ant-table-pagination.ant-pagination {
display: none;
}
.paginationBox {
position: relative;
margin-top: 56px;
margin-bottom: 108px;
padding: 0 0 0 113px;
.pagination {
// background-color: cyan;
float: right;
margin-right: 100px;
.ant-pagination-item-active {
background: rgba(28, 106, 235, 1);
a {
color: #fff !important;
font-weight: 400 !important;
}
}
// li:first-child{
// margin-left: calc(100% - 300px);
// }
.ant-pagination-options-size-changer.ant-select {
width: 100px;
// background-color: red;
position: absolute;
left: 0;
top: 0;
}
.ant-pagination-options-quick-jumper {
// background-color: red;
position: absolute;
right: 0;
top: 0;
}
}
}
</style>
分割线
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
以下部分是另一个需求代码—手写分页:
1.正常情况下,此页面只需要将表格table和分页pagination结合就可以使用其分页获取数据的效果;
但是此页比较特殊,获取到字段的信息后,将字段的分级修改选择后,提交给后端需要提交所有的数据list,而不是某一页的数据list。
在此情境下,原table自带的10条分页虽然满足,但是字段过多时候无法选择每页的尺寸;而表格table和分页pagination结合又无法获取所有的数据list进行一次性的修改和提交;
所以这里我的做法是,继续使用表格table和分页pagination的分页功能,但是让后台直接一次性返回所有的数据list,而我在获取到所有数据后,第一次手动截取前10条的数据,作为默认的第1页10条的数据进行展示。
else if (urlLink == "grading/gradColumnDetail") { // 获取列表信息
var data = [];
for (var i = 0; i < rep.data.rspData.length; i++) {
var obj = rep.data.rspData[i];
obj.key = i + 1;
data.push(obj);
}
//所有的字段--用于最后提交、一次性设置分级和记录每一次的分级设置
_self.dataAll = data;
//显示数据列表的data字段 不是所有的字段(手动截取) 同时展示的个数不仅仅取决于自己截取的个数 还取决于选择的尺寸必须大于等于截取个数 才会显示完全
//截取的数据=(当前页码 - 1)*页码尺寸 截取到 当前页码*页码尺寸
_self.data = data.slice((_self.pagination.current - 1) * (_self.pagination.pageSize),(_self.pagination.current) * (_self.pagination.pageSize));
_self.total = _self.dataAll.length;
_self.loading = false;
_self.id = rep.data.rspData.record_id;
}
后面选择分页的页码或者尺寸,注意不应该再走获取数据list的接口了;而应该是自己手动截取总量list进行显示即可;
//手动针对所有数据进行分页截取
getNeedSum(){
//判断选择的页码和页码尺寸有没有超过总量;
if ((this.pagination.current - 1) * (this.pagination.pageSize) <= this.total) {//没超过----正常选择截取
//截取的数据=(当前页码 - 1)*页码尺寸 截取到 当前页码*页码尺寸
this.data = this.dataAll.slice((this.pagination.current - 1) * (this.pagination.pageSize),(this.pagination.current) * (this.pagination.pageSize));
} else {//如果超出总量 那就是截取最大页码的那一页数据Math.ceil()
//例如总量61,一开始是第3页 页码是10条,当页码选择为40条时候,总条数是没有3页40条的,而应该是最大页 2页40条尺寸
//截取的数据=(最大页码 - 1)*页码尺寸 截取到 最大页码*页码尺寸
this.data = this.dataAll.slice((Math.ceil(this.total/this.pagination.pageSize) - 1) * (this.pagination.pageSize),(Math.ceil(this.total/this.pagination.pageSize)) * (this.pagination.pageSize));
}
},
// 点击分页
onChangePagination(current) {
console.log(current);
this.pagination.current = current;
this.getNeedSum();
},
// 点击分页尺寸
onShowSizeChange(current, pageSize) {
this.pagination.current = current;
this.pagination.pageSize = pageSize;
this.getNeedSum();
},