快捷導(dǎo)航

vue+elementUI實(shí)現(xiàn)分頁效果

更新時(shí)間：2022年07月07日 07:17:55 作者：小白_0615

這篇文章主要為大家詳細(xì)介紹了vue+elementUI實(shí)現(xiàn)分頁效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了vue+elementUI實(shí)現(xiàn)分頁效果的具體代碼，供大家參考，具體內(nèi)容如下

頁面中渲染的數(shù)據(jù)不是所有數(shù)據(jù)，是需要展示的數(shù)據(jù)，即當(dāng)前頁的數(shù)據(jù)，默認(rèn)第一頁的數(shù)據(jù)，這里為showDate

template中代碼段（渲染數(shù)據(jù)）

<div style="height:76vh;margin-top:1%">
? ? ? ? ? ? <el-table :data="showData"
? ? ? ? ? ? ? ? ? ? ? style="width: 100%"
? ? ? ? ? ? ? ? ? ? ? :header-cell-style="headClass">
? ? ? ? ? ? ? ? <el-table-column type="index"
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?label="編號(hào)"
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?width="80"
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?header-align="center"
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?align="center"></el-table-column>
? ? ? ? ? ? ? ? <el-table-column prop="name"
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?label="企業(yè)名稱"
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?width="180"
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?header-align="center"
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?align="center"></el-table-column>
? ? ? ? ? ? ? ? <el-table-column prop="date"
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?label="注冊時(shí)間"
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?width="150"
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?header-align="center"
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?align="center"></el-table-column>
? ? ? ? ? ? ? ? <el-table-column prop="publishNumber"
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?label="發(fā)布崗位數(shù)量"
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?width="130"
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?header-align="center"
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?align="center"></el-table-column>
? ? ? ? ? ? ? ? <el-table-column prop="checkTimes"
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?label="查看簡歷次數(shù)"
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?width="130"
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?header-align="center"
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?align="center"></el-table-column>
? ? ? ? ? ? ? ? <el-table-column prop="companyStatus"
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?label="崗位發(fā)布權(quán)限"
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?width="130"
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?header-align="center"
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?align="center">
? ? ? ? ? ? ? ? ? ? <template slot-scope="scope">
? ? ? ? ? ? ? ? ? ? ? ? <span v-if="scope.row.companyStatus == 1">否</span>
? ? ? ? ? ? ? ? ? ? ? ? <span v-else-if="scope.row.companyStatus == 0">是</span>
? ? ? ? ? ? ? ? ? ? </template>
? ? ? ? ? ? ? ? </el-table-column>
? ? ? ? ? ? ? ? <el-table-column prop="companyStatus"
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?label="查看人才權(quán)限"
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?width="130"
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?header-align="center"
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?align="center">
? ? ? ? ? ? ? ? ? ? <template slot-scope="scope">
? ? ? ? ? ? ? ? ? ? ? ? <span v-if="scope.row.companyStatus == 1">否</span>
? ? ? ? ? ? ? ? ? ? ? ? <span v-else-if="scope.row.companyStatus == 0">是</span>
? ? ? ? ? ? ? ? ? ? </template>
? ? ? ? ? ? ? ? </el-table-column>
?
? ? ? ? ? ? ? ? <el-table-column prop="RecruitmentTimes"
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?label="現(xiàn)場招聘次數(shù)"
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?width="130"
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?header-align="center"
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?align="center"></el-table-column>
?
? ? ? ? ? ? ? ? <el-table-column prop="windowPublishTimes"
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?label="櫥窗發(fā)布次數(shù)"
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?width="130"
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?header-align="center"
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?align="center"></el-table-column>
?
? ? ? ? ? ? ? ? <el-table-column prop="companyStatus"
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?label="企業(yè)狀態(tài)"
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?width="130"
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?header-align="center"
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?align="center">
? ? ? ? ? ? ? ? ? ? <template slot-scope="scope">
? ? ? ? ? ? ? ? ? ? ? ? <span v-if="scope.row.companyStatus == 1"
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? style="color: #1ec6df">啟用</span>
? ? ? ? ? ? ? ? ? ? ? ? <span v-else-if="scope.row.companyStatus == 0"
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? style="color: #df721e">禁用</span>
? ? ? ? ? ? ? ? ? ? </template>
? ? ? ? ? ? ? ? </el-table-column>
?
? ? ? ? ? ? ? ? <el-table-column fixed="right"
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?label="操作"
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?width="280">
?
? ? ? ? ? ? ? ? ? ? <template>
? ? ? ? ? ? ? ? ? ? ? ? <el-link :underline="false"
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?href="#" rel="external nofollow"  rel="external nofollow" 
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?class="alink">崗位列表</el-link>
? ? ? ? ? ? ? ? ? ? ? ? <el-link :underline="false"
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?href="#" rel="external nofollow"  rel="external nofollow" 
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?class="alink">開通記錄</el-link>
? ? ? ? ? ? ? ? ? ? </template>
? ? ? ? ? ? ? ? </el-table-column>
? ? ? </el-table>
</div>

template中代碼段（分頁部分，與上一段代碼同層級(jí)）

<div class="block">
? ? ? ? ? ? <el-pagination :page-size="pagesize"
? ? ? ? ? ? ? ? ? ? ? ? ? ?:current-page="currentPage"
? ? ? ? ? ? ? ? ? ? ? ? ? ?layout="prev, pager, next"
? ? ? ? ? ? ? ? ? ? ? ? ? ?:total="companyData.length"
? ? ? ? ? ? ? ? ? ? ? ? ? ?@current-change="handleCurrentChange"
? ? ? ? ? ? ? ? ? ? ? ? ? ?@prev-click="upChange"
? ? ? ? ? ? ? ? ? ? ? ? ? ?@next-click="nextChange"
? ? ? ? ? ? ? ? ? ? ? ? ? ?style="text-align: center;">
? ? ? ? </el-pagination>
</div>

下面是邏輯實(shí)現(xiàn)

1.定義數(shù)組

2.初始化賦值第一頁的數(shù)據(jù)

slice()

<script>
export default {
? ? //頁面第一次加載 顯示的數(shù)據(jù)
? ? created() {
? ? ? ? this.showData = this.companyData.slice(0, this.pagesize);
? ? ? ? console.log("顯示的數(shù)據(jù)");
? ? ? ? console.log(this.showData);
? ? },
? ? data() {
? ? ? ? return {
? ? ? ? ? ? // 企業(yè)名稱
? ? ? ? ? ? companyName: "",
? ? ? ? ? ? showData: [], //顯示的數(shù)據(jù)
? ? ? ? ? ? pagesize: 3, //一頁的數(shù)據(jù)條數(shù)
? ? ? ? ? ? currentPage: 1, //當(dāng)前頁是從哪頁開始
? ? ? ? ? ? companyData: [
? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? name: "企業(yè)名稱1",
? ? ? ? ? ? ? ? ? ? date: "2016-05-04",
? ? ? ? ? ? ? ? ? ? publishNumber: 12,
? ? ? ? ? ? ? ? ? ? checkTimes: 10,
? ? ? ? ? ? ? ? ? ? RecruitmentTimes: 110,
? ? ? ? ? ? ? ? ? ? windowPublishTimes: 120,
? ? ? ? ? ? ? ? ? ? companyStatus: 0,
? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? name: "企業(yè)名稱2",
? ? ? ? ? ? ? ? ? ? date: "2016-05-04",
? ? ? ? ? ? ? ? ? ? publishNumber: 12,
? ? ? ? ? ? ? ? ? ? checkTimes: 10,
? ? ? ? ? ? ? ? ? ? RecruitmentTimes: 110,
? ? ? ? ? ? ? ? ? ? windowPublishTimes: 120,
? ? ? ? ? ? ? ? ? ? companyStatus: 0,
? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? name: "企業(yè)名稱3",
? ? ? ? ? ? ? ? ? ? date: "2016-05-04",
? ? ? ? ? ? ? ? ? ? publishNumber: 12,
? ? ? ? ? ? ? ? ? ? checkTimes: 10,
? ? ? ? ? ? ? ? ? ? RecruitmentTimes: 110,
? ? ? ? ? ? ? ? ? ? windowPublishTimes: 120,
? ? ? ? ? ? ? ? ? ? companyStatus: 1,
? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? name: "企業(yè)名稱4",
? ? ? ? ? ? ? ? ? ? date: "2016-05-04",
? ? ? ? ? ? ? ? ? ? publishNumber: 12,
? ? ? ? ? ? ? ? ? ? checkTimes: 10,
? ? ? ? ? ? ? ? ? ? RecruitmentTimes: 110,
? ? ? ? ? ? ? ? ? ? windowPublishTimes: 120,
? ? ? ? ? ? ? ? ? ? companyStatus: 1,
? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? name: "企業(yè)名稱5",
? ? ? ? ? ? ? ? ? ? date: "2016-05-04",
? ? ? ? ? ? ? ? ? ? publishNumber: 12,
? ? ? ? ? ? ? ? ? ? checkTimes: 10,
? ? ? ? ? ? ? ? ? ? RecruitmentTimes: 110,
? ? ? ? ? ? ? ? ? ? windowPublishTimes: 120,
? ? ? ? ? ? ? ? ? ? companyStatus: 1,
? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? name: "企業(yè)名稱6",
? ? ? ? ? ? ? ? ? ? date: "2016-05-04",
? ? ? ? ? ? ? ? ? ? publishNumber: 12,
? ? ? ? ? ? ? ? ? ? checkTimes: 10,
? ? ? ? ? ? ? ? ? ? RecruitmentTimes: 110,
? ? ? ? ? ? ? ? ? ? windowPublishTimes: 120,
? ? ? ? ? ? ? ? ? ? companyStatus: 1,
? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? name: "企業(yè)名稱7",
? ? ? ? ? ? ? ? ? ? date: "2016-05-04",
? ? ? ? ? ? ? ? ? ? publishNumber: 12,
? ? ? ? ? ? ? ? ? ? checkTimes: 10,
? ? ? ? ? ? ? ? ? ? RecruitmentTimes: 110,
? ? ? ? ? ? ? ? ? ? windowPublishTimes: 120,
? ? ? ? ? ? ? ? ? ? companyStatus: 1,
? ? ? ? ? ? ? ? },
? ? ? ? ? ? ],
? ? ? ? };
? ? },
? ? methods: {
? ? ? ? //選擇頁
? ? ? ? handleCurrentChange(val) {
? ? ? ? ? ? this.currentPage = val; //動(dòng)態(tài)改變
? ? ? ? ? ? this.showData = this.companyData.slice(
? ? ? ? ? ? ? ? (this.currentPage - 1) * this.pagesize,
? ? ? ? ? ? ? ? this.currentPage * this.pagesize
? ? ? ? ? ? );
? ? ? ? },
? ? ? ? //上一頁
? ? ? ? upChange(val) {
? ? ? ? ? ? console.log(val);
? ? ? ? ? ? this.currentPage -= 1; //動(dòng)態(tài)改變
? ? ? ? ? ? this.showData = this.companyData.slice(
? ? ? ? ? ? ? ? (this.currentPage - 1) * this.pagesize,
? ? ? ? ? ? ? ? this.currentPage * this.pagesize
? ? ? ? ? ? );
? ? ? ? },
? ? ? ? //下一頁
? ? ? ? nextChange(val) {
? ? ? ? ? ? this.currentPage += 1; //動(dòng)態(tài)改變
? ? ? ? ? ? this.showData = this.companyData.slice(
? ? ? ? ? ? ? ? (this.currentPage - 1) * this.pagesize,
? ? ? ? ? ? ? ? this.currentPage * this.pagesize
? ? ? ? ? ? );
? ? ? ? },
?
? ? },
};
</script>

以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: