请假列表
1、数据获取与显示的通用方法封装

table.js
//请假列表的 表格数据获取 封装方法的处理
export function getTableData(root, url, params ){root.service.get(url, { params: params || {} }).then(res => {if(res.data.status === 200 ){root.tableData = res.data.dataroot.total = res.total}}).catch((error) => {throw error;});
}
2、数据转换
共两层遍历:
1、获取数据对象——user
2、因为要进行转换格式的数据在每一个的user对象里,∴先进行遍历user对象
3、每一个user对象都有很多数据,都是键值对的方式。当表格中需要转换的数据不只一两处,为了提高代码复用性,所以采用数组的方式,存放需要转换的数据的键名。最后只需要遍历user对象的数组,通过三元式进行判断,再修改新值(为了显示且不修改原数据而建)


//请假列表的 表格数据获取 封装方法的处理
export function getTableData(root, url, params, arr ){root.service.get(url, { params: params || {} }).then(res => {if(res.data.status === 200 ){root.tableData = res.data.dataroot.total = res.totalroot.tableData.map(item => {arr.map(aItem => [item[aItem] ? item[aItem + '_text'] = '已批准' : item[aItem + '_text'] = '未批准'])})}}).catch((error) => {throw error;});
}
数据加载动画 —— 使用官方文档

服务方式:

后端实现分页
查看请求后端接口:发现需要两个参数——当页数和每页条数
前端的方法是用公式计算,参考博文

这里用后端的方法:分页由后端完成,所以每次切换页面的数据条数和当前页码时,都要根据接口请求参数,发送请求。
debug:总条数和数据页码不显示。 

修改添加scss样式后:
//请假列表的 表格数据获取 封装方法的处理
export function getTableData(root, url, params, arr ){root.service.get(url, { params: params || {} }).then(res => {if(res.data.status === 200 ){root.tableData = res.data.dataroot.total = res.data.totalroot.tableData.map(item => {arr.map(aItem => [item[aItem] ? item[aItem + '_text'] = '已批准' : item[aItem + '_text'] = '未批准'])})root.loading = false}}).catch((error) => {throw error;});
}
后端分页组件封装和复用
在common文件夹下,新建Pagin.vue组件,把上一个页面与分页相关的代码复制过来,修改后如下:
使用组件化的思想,封装分页组件, 需要注意的点:
1、只保留与分页本身功能相关的参数
2、发送后端请求的参数 ===>父组件根节点以及传递的url
分页组件复用:
AbsenceListsManage.vue
使用组件化后最后效果一样,代码可读性更强。 