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,跟着请求头一起带过去