Vue+element-ui實現分頁+條件查詢

涉及到判斷數據庫查詢出的數據時:兩個數據時最好使用三元表達式更加簡潔

 <el-table-column
      prop="isfamous"
      label="級別">
      <template slot-scope="scope">
         {{scope.row.isfamous=='y'?'高級':'中級'}}

      </template>
    </el-table-column>

 

 

 關於狀態位置的變色標簽判斷,span中間添加標簽即可,也可用於多個值的判斷

<template slot-scope="scope">
         <span v-if="scope.row.status=='y'">
           <el-tag effect="dark" type="success">在職</el-tag>
         </span>
         <span v-else>
           <el-tag effect="dark" type="danger">離職</el-tag>
         </span>

       </template>

分頁組件

<!-- 分頁開始 -->
  <el-pagination
    background
    layout="prev, pager, next, jumper,sizes,total"
    :total="total"
    :page-sizes="pagesizes"
    :page-size="pagesize"
     :page-count="5"
  :currentpage="currentpage"
     @size-change="btncurrent"
    @current-change="btnchange"
    @prev-click="btnPrev"
    @next-click="btnNext"

    >
  </el-pagination>
<!-- 分頁結束 -->

data() {
    return {
      teacherItem:[],
      teachername:'',
      total:0,//總條數
      pagesizes:[3, 5, 7, 10],//每頁條數切換
      pagesize:5,//每頁條數
      pagecount:0,//總頁數
      currentpage:1,//當前頁碼
    }
  }

    let pageinfo=result.data.data;
            //為分頁組件賦值
            this.total=pageinfo.total;
            this.pagesize=pageinfo.pageSize;
            this.pagecount=pageinfo.pages;
            this.currentpage=pageinfo.pageNum;

分頁事件

,btnchange(currentpage){//點擊頁碼跳轉
      this.currentpage=currentpage;
     this.showList();
    },btnPrev(currentpage){//上一頁
      this.currentpage=currentpage;
      this.showList();
    },btnNext(currentpage){//下一頁
      this.showList();

    },btncurrent(pagesize){//每頁第數更改時
      this.pagesize=pagesize;
      this.showList();
    },btnQuery(){//多條件查詢
      this.currentpage=1;
      this.showList();
    }

登錄后token的傳值,登錄后每個請求都要帶着token請求

   

//獲得登錄時的token
let jwttoken=localStorage.getItem("jwtToken");
//發起請求攜帶token
axios.get('http://127.0.0.1:8080/teacher/list',
  {params:{queryTxt:this.teachername,pageNo:this.currentpage,pageSize:this.pagesize},headers:{'jwtJson':jwttoken}})

后面的headers為token,跟着請求頭一起帶過去