表格数据方法、分页方法及组件的封装和分页组件的复用

请假列表

 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.data
            root.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.data
            root.total = res.total
            root.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.data
            root.total = res.data.total
            root.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

使用组件化后最后效果一样，代码可读性更强。