前面有提到在vue裏面,對於表格的使用:vue2.0 + element-ui 實戰項目-渲染表格(四)https://www.jianshu.com/p/fea8cacc04b9,在實戰的過程中,往往還要選擇一個合適的分頁,搭配着一起使用,尤其是數據比較多的時候,必然會做出分頁效果。
關於一些經常用到的參考文檔:這裏都羅列一下,查找起來比較方便
Element UI手冊:https://cloud.tencent.com/developer/doc/1270
github地址:https://github.com/ElemeFE/element
vue2.0官方網站:http://caibaojian.com/vue/guide/installation.html
element-ui官方網站:https://element.eleme.cn/#/zh-CN
1:在組件裏面找一個自己比較喜歡的分頁的樣式
https://element.eleme.cn/#/zh-CN/component/pagination
其實我們可以看到,文檔裏面的樣式非常的簡單
複製一下這段代碼
<el-pagination
background
layout="prev, pager, next"
:total="1000">
</el-pagination>
就可以在頁面上看到一個靜態的分頁的效果了
2:最重要的一個步驟就是點擊分頁的辦法
// 初始頁currentPage、初始每頁數據數pagesize和數據data
handleSizeChange: function (size) {
this.pagesize = size;
console.log(this.pagesize); //每頁下拉顯示數據
},
handleCurrentChange: function (currentPage) {
this.currentPage = currentPage;
console.log(this.currentPage); //點擊第幾頁
},
3:對錶格中獲取到的json數據進行處理
:data="pvData.slice((currentPage - 1) * pagesize, currentPage * pagesize)"
4:將前面的靜態分頁也進行修改一下,加上方法和變量
<el-pagination
style="margin: 12px 0px"
background
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="[5, 10, 20, 40]"
:page-size="pagesize"
layout="total, sizes, prev, pager, next, jumper"
:total="pvData.length"
>
</el-pagination>
5:寫一個完整的實例:
json
{"msg":"success","total":0,"code":1,"data":[{"id":6,"userOrganId":null,"userName":"super","sex":1,"realName":"super","birthday":null,"password":"202cb962ac59075b964b07152d234b70","roleId":1,"roleName":"角色1","organId":1,"organName":"部門1","authority":0,"companyId":1,"phone":null,"organIds":null,"isPagination":false,"page":1,"rows":1},{"id":13,"userOrganId":null,"userName":"super2","sex":1,"realName":"super","birthday":null,"password":"202cb962ac59075b964b07152d234b70","roleId":1,"roleName":"角色1","organId":1,"organName":"部門1","authority":0,"companyId":1,"phone":null,"organIds":null,"isPagination":false,"page":1,"rows":1},{"id":14,"userOrganId":null,"userName":"999","sex":1,"realName":"999","birthday":null,"password":"d41d8cd98f00b204e9800998ecf8427e","roleId":1,"roleName":"1","organId":1,"organName":"1","authority":1,"companyId":1,"phone":null,"organIds":null,"isPagination":false,"page":1,"rows":1},{"id":27,"userOrganId":null,"userName":"21","sex":null,"realName":"21","birthday":null,"password":"d41d8cd98f00b204e9800998ecf8427e","roleId":1,"roleName":"","organId":1,"organName":"","authority":1,"companyId":1,"phone":null,"organIds":null,"isPagination":false,"page":1,"rows":1},{"id":28,"userOrganId":null,"userName":"111","sex":1,"realName":"111","birthday":null,"password":"202cb962ac59075b964b07152d234b70","roleId":1,"roleName":"1","organId":1,"organName":"14","authority":1,"companyId":1,"phone":null,"organIds":null,"isPagination":false,"page":1,"rows":1},{"id":29,"userOrganId":null,"userName":"212","sex":0,"realName":"121","birthday":null,"password":"d41d8cd98f00b204e9800998ecf8427e","roleId":1,"roleName":"1","organId":1,"organName":"13","authority":1,"companyId":1,"phone":null,"organIds":null,"isPagination":false,"page":1,"rows":1}]}
實例代碼
<template>
<div class="tab-container">
<el-table
:data="pvData.slice((currentPage - 1) * pagesize, currentPage * pagesize)"
border
fit
highlight-current-row
style="width: 100%"
>
<el-table-column
prop="userName"
label="用戶名"
width="180"
></el-table-column>
<el-table-column prop="realName" label="姓名"></el-table-column>
<el-table-column prop="sex" label="性別" :formatter="formatSex"></el-table-column>
<el-table-column prop="organName" label="所屬部門"></el-table-column>
<el-table-column prop="authority" label="權限"></el-table-column>
<el-table-column prop="roleName" label="角色"></el-table-column>
</el-table>
<el-pagination
style="margin: 12px 0px"
background
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="[5, 10, 20, 40]"
:page-size="pagesize"
layout="total, sizes, prev, pager, next, jumper"
:total="pvData.length"
>
</el-pagination>
</div>
</template>
<script>
//調用接口
import {getQuerycheckList} from "@/api/permission/user";
export default {
data() {
return {
// 分頁
currentPage: 1, //初始頁
pagesize: 5, // 每頁的數據
total: 0,
pvData: [],
};
},
created() {
this.getQuerycheckList();
},
methods: {
// 初始頁currentPage、初始每頁數據數pagesize和數據data
handleSizeChange: function (size) {
this.pagesize = size;
console.log(this.pagesize); //每頁下拉顯示數據
},
handleCurrentChange: function (currentPage) {
this.currentPage = currentPage;
console.log(this.currentPage); //點擊第幾頁
},
//查詢題目列表信息接口
getQuerycheckList() {
const params = {
organId: 1,
userOrganId: 1,
authority: 0,
page: 1,
rows: 5,
isPagination: false,
};
getQuerycheckList(params).then((res) => {
console.log("查詢題目列表信息", res);
this.pvData = res.data;
});
},
//格式化性別
formatSex(row, column) {
return row.sex === 1? "男" : "女";
}
},
};
</script>
<style scoped>
.tab-container {
margin: 30px;
}
</style>
效果: