vue+Element分页组件

Element自带分页组件的使用

 <el-table
            ref="singleTable"
            :data="tableData"
            highlight-current-row
            border
            @current-change="handleCurrentChange"
            style="width: 100%">
            <el-table-column
              property="id"
              label="ID"
              width="199"
              show:"false"
              align="center">
            </el-table-column>
            <el-table-column
              property="userName"
              label="姓名"
              width="100"
              align="center">
            </el-table-column>
            <el-table-column
              property="comNum"
              label="工号"
              width="100"
              align="center">
            </el-table-column>

 </el-table>

<el-pagination
              background
              layout="prev, pager, next,total"
              :page-size="pageSize"
              :current-page="currentPage"
              :total="totalPage"
              @current-change="currentChange">
</el-pagination>

---

vue:

new Vue({
        el:'#user',
        data: {
            tableData: [],
            currentRow: null,    
            pageSize:10,
            currentPage:1,
            totalPage:0,
       },

      created() { // 当 vm 实例 的 data 和 methods 初始化完毕后，vm实例会自动执行created 这个生命周期函数
          this.getAllUserList();
      },

      methods:{
          getAllUserList(){//获取员工
              var url =  getAllUserByVaildUrl;//所有有效的
              this.$http.get(url,{
                    params: {
                        "page":this.currentPage,
                    }
                }).then(result => {
                // 注意： 通过 $http 获取到的数据，都在 result.body 中放着
                var result = result.body
                if (result.status = 200) {
                  // 成功了
                    if(result==null||result==""){
                        this.tableData = []
                    }else{
                        var pageResult = JSON.parse(result);
                        this.tableData = pageResult.list;//将json字符串转化为json对象
                        this.currentPage = pageResult.currentPage;
                        this.totalPage = pageResult.total;
                    }
                } else {
                  // 失败了
                  alert('获取数据失败！')
                }
              })
          },

         currentChange(val){//页码改变时触发
                this.currentPage=val;
                this.getAllUserList();
            },

});

---

SpringBoot后端代码

   @Autowired
    private SalaryUserMapper salaryUserMapper;
    /**
     * 获取所有有效员工，分页展示
     * @return
     * author：cgx
     * 下午4:57:16
     */
    @RequestMapping("/getAllUserByVaild")
    @ResponseBody
    public SalaryPages getAllUserByVaild(HttpServletRequest request){
        String currentPage = request.getParameter("page");
        System.out.println("currentPage="+currentPage);
        int cPage = Integer.parseInt(currentPage);
        int startPage = (cPage-1)*10;
        Map<String,Integer> map = new HashMap<String, Integer>();
        map.put("startPage", startPage);
        map.put("pageSize", 10);
        
        List<SalaryUserWithCorp> users = salaryUserMapper.selectAllUserByVaild(map);
        
        int total = salaryUserMapper.selectTotalUserByVaild();
        SalaryPages<SalaryUserWithCorp> userPages = new SalaryPages<SalaryUserWithCorp>();
        userPages.setList(users);
        userPages.setCurrentPage(cPage);
        userPages.setTotal(total);
        return userPages;
    }

---

SalaryUserMapper 接口类

 List<SalaryUserWithCorp> selectAllUserByVaild(Map<String,Integer> map);//有效的
    
 int selectTotalUserByVaild();//有效的总数

---

SalaryUserMapper.xml

<!-- 分页查询有效的 -->
  <select id="selectAllUserByVaild" parameterType="java.util.Map" resultMap="BaseResultMap1">
      select * from salary_user where VALIDITY=1 order by ID desc  LIMIT #{startPage},#{pageSize}
  </select>

<!-- 查询有效的总数 -->
  <select id="selectTotalUserByVaild" resultType="java.lang.Integer">
      select count(id) from salary_user where VALIDITY=1
  </select>