<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è)名稱(chēng)"
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?width="180"
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?header-align="center"
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?align="center"></el-table-column>
? ? ? ? ? ? ? ? <el-table-column prop="date"
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?label="注冊(cè)時(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="查看簡(jiǎn)歷次數(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)場(chǎng)招聘次數(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">開(kāi)通記錄</el-link>
? ? ? ? ? ? ? ? ? ? </template>
? ? ? ? ? ? ? ? </el-table-column>
? ? ? </el-table>
</div>

template中代碼段（分頁(yè)部分，與上一段代碼同層級(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.初始化賦值第一頁(yè)的數(shù)據(jù)

slice()

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

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

您可能感興趣的文章: