前言
使用ElementUI已經(jīng)有一段時(shí)間了，在一邊上手開發(fā)后臺(tái)管理系統(tǒng)的同事，也記錄了一些筆記，一直都沒(méi)有時(shí)間將這些零零散散的筆記總結(jié)起來(lái)斑鸦，整理成一個(gè)比較系統(tǒng)詳細(xì)一點(diǎn)的教程，可以留著以后來(lái)看草雕。
關(guān)于開發(fā)過(guò)程中巷屿，確實(shí)使用到很大一部分的文檔，都說(shuō)前端開發(fā)離不開文檔墩虹，重要的話說(shuō)三遍嘱巾，一定要多看文檔。
管理后臺(tái)解決方案
vue-element-admin 是一個(gè)后臺(tái)前端解決方案诫钓，它基于 vue 和 element-ui實(shí)現(xiàn)旬昭。
Star指數(shù)：69.7k
Github 地址：https://github.com/PanJiaChen/vue-element-admin
Demo體驗(yàn)：https://panjiachen.github.io/vue-element-admin/#/dashboard
官方文檔：https://panjiachen.github.io/vue-element-admin-site/zh/
使用建議
本項(xiàng)目的定位是后臺(tái)集成方案，不太適合當(dāng)基礎(chǔ)模板來(lái)進(jìn)行二次開發(fā)菌湃。因?yàn)楸卷?xiàng)目集成了很多你可能用不到的功能问拘，會(huì)造成不少的代碼冗余。如果你的項(xiàng)目不關(guān)注這方面的問(wèn)題慢味，也可以直接基于它進(jìn)行二次開發(fā)场梆。
Vue+ElementUI 搭建后臺(tái)管理系統(tǒng)（實(shí)戰(zhàn)系列六） - 表格分頁(yè)
前面有提到在vue里面，對(duì)于表格的使用：vue2.0 + element-ui 實(shí)戰(zhàn)項(xiàng)目-渲染表格系列文章纯路，在實(shí)戰(zhàn)的過(guò)程中或油，往往還要選擇一個(gè)合適的分頁(yè)，搭配著一起使用驰唬，尤其是數(shù)據(jù)比較多的時(shí)候顶岸，必然會(huì)做出分頁(yè)效果。
關(guān)于一些經(jīng)常用到的參考文檔：這里都羅列一下,查找起來(lái)比較方便叫编。
1：在組件里面找一個(gè)自己比較喜歡的分頁(yè)的樣式
https://element.eleme.cn/#/zh-CN/component/pagination
其實(shí)我們可以看到辖佣，文檔里面的樣式非常的簡(jiǎn)單
復(fù)制一下這段代碼
<el-pagination
background
layout="prev, pager, next"
:total="1000">
</el-pagination>
就可以在頁(yè)面上看到一個(gè)靜態(tài)的分頁(yè)的效果了
2：最重要的一個(gè)步驟就是點(diǎn)擊分頁(yè)的辦法
// 初始頁(yè)currentPage、初始每頁(yè)數(shù)據(jù)數(shù)pagesize和數(shù)據(jù)data
handleSizeChange: function (size) {
this.pagesize = size;
console.log(this.pagesize); //每頁(yè)下拉顯示數(shù)據(jù)
},
handleCurrentChange: function (currentPage) {
this.currentPage = currentPage;
console.log(this.currentPage); //點(diǎn)擊第幾頁(yè)
},
3：對(duì)表格中獲取到的json數(shù)據(jù)進(jìn)行處理
:data="pvData.slice((currentPage - 1) * pagesize, currentPage * pagesize)"
4:將前面的靜態(tài)分頁(yè)也進(jìn)行修改一下搓逾，加上方法和變量
<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：寫一個(gè)完整的實(shí)例：
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}]}
實(shí)例代碼
<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="權(quán)限"></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>
//調(diào)用接口
import {getQuerycheckList} from "@/api/permission/user";
export default {
data() {
return {
// 分頁(yè)
currentPage: 1, //初始頁(yè)
pagesize: 5, // 每頁(yè)的數(shù)據(jù)
total: 0,
pvData: [],
};
},
created() {
this.getQuerycheckList();
},
methods: {
// 初始頁(yè)currentPage卷谈、初始每頁(yè)數(shù)據(jù)數(shù)pagesize和數(shù)據(jù)data
handleSizeChange: function (size) {
this.pagesize = size;
console.log(this.pagesize); //每頁(yè)下拉顯示數(shù)據(jù)
},
handleCurrentChange: function (currentPage) {
this.currentPage = currentPage;
console.log(this.currentPage); //點(diǎn)擊第幾頁(yè)
},
//查詢題目列表信息接口
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>
效果：
