工作笔记-Vue2.0-element-UI-分页功能的部分需求分析

在数据渲染前，一般都要用axios发送ajax请求拿数据，而发送分页的ajax请求时都要提供分页的相关属性：每页几条，当前第几页。这些数据会存在data中，所以最好在起名的时候让data中的参数名与后端接口需要的参数名相同，这样就可以省去改名的麻烦了。

如果为组件添加了current-change事件：

// 用户点击了页码
hCurrentChange (curPage) {
// 1.更新页码
 this.queryParams.page = curPage
// 2.重发请求
     this.loadEmployees()
},
// 用户点击了每页条数
 hSizeChange(curPageSize) {
     // 1.更新每页条数
     this.queryParams.pagesize = curPageSize
     // 2.重发请求
     this.loadEmployees()
 }

删除功能的固定套路：

1. 因为删除功能时敏感操作，所以一定会用到confirm这个提示框来提示一下用户，用户点击确认后才会执行真正的操作。

2. 删除功能一定要传入参数（id），调用api。

export delEmployee(id){
    return request({
        url:'xxx'+id,
        method:'DELETE'
    })
}

3.删除成功后，重新查询当前页面，更新渲染最新的数据到页面上。

根据接口文档定义的一个删除用api：

如果使用的是作用域插槽（slot-scope）它的值是scope，然后给删除按钮添加点击事件，把scope中的id传入事件函数中，然后在事件中写一个$confirm的提示框，在这个方法的.then()中封装一个真正执行删除方法的函数：

async doDel(id) {
    // 1.调用API，作删除
    const res = await delEmployee(id)
    console.log(res)
    // 2.如果删除最后一页的最后一条数据后，页面会显示不正常
    if(this.employees.length === 1){
    // 如果删除的是最后一条数据，页码要减1
        this.page--
        if(this.page<=0){
        // 避免用户把数据删没了之后还让 page--
            this.page = 1
        }
    }
    // 重发请求
    this.loadEmployee()
    
}

注意！：这个判断语句要写在删除成功之后，重新请求之前。