vue+Element分页组件

最新推荐文章于 2024-09-30 16:08:58 发布

夕冰

最新推荐文章于 2024-09-30 16:08:58 发布

阅读量1.4k

点赞数

分类专栏： Mybatis VUE SpringBoot

本文链接：https://blog.csdn.net/chenguixu/article/details/89708748

版权

SpringBoot 同时被 3 个专栏收录

18 篇文章 0 订阅

订阅专栏

VUE

9 篇文章 0 订阅

订阅专栏

Mybatis

3 篇文章 0 订阅

订阅专栏

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>