通用后台管理系统前端界面Ⅸ——数据表格渲染及处理+前端分页

数据表格渲染

1、找

在页面添加table表格，从element-ui官网查找，包括数据一起复制过来，查看显示没有问题后，把tableData清空为空数组。

2、请求数据接口

根据接口，修改api.js文件：请求方法、地址、参数，并将接口暴露出来。

// 把对应的接口请求封装成api来调用
import service from '../service'
// import qs from 'qs'

// 登录接口
export function login(data) {
    return service({
        method: 'post',
        url: '/login',
        data
    })
}

//列表查询接口
export function students(param){
    return{
        method: 'get',
        url: '/students',
        param
    }
}

 3、在渲染页面前发送请求

 此时调试出现的问题：（只修改2处也是可以的）

api.js 

// 把对应的接口请求封装成api来调用
import service from '../service'
// import qs from 'qs'

// 登录接口
export function login(data) {
    return service({
        method: 'post',
        url: '/login',
        data
    })
}

//列表查询接口
export function students(param){
    return service({
        method: 'get',
        url: '/students',
        param
    })
}

打印返回的数据结果：

 修改页面表头，渲染返回的数据：

1、表头prop属性值一定要和返回来的数据的key相同，否则渲染不出来

eg：

2、样式修改（小技巧）

 修改前：

修改后：滚动条消失

4、返回数据渲染到页面上

将数据进行传递，动态直接渲染。

 但是这样写报错，如下：

render===》渲染的时候出了问题，返回去找。

 分析返回的数据格式，打印：res.data  :

而传递数据时：

 tableData是一个对象数组，而res.data是一个大群的对象数据，里面还有status和message、data等。真正是tableData的数据是res.data.data

 修改后：

效果：但是有些数据上显示的问题：性别应该是男或女，不是1或2

表格数据处理——数据转换

大部分系统开发文档里，定义的数据库里有些字段，是用是用数字代替某些意义的字符。

eg：性别：1代表男，2代表女；

        图书管理系统的，书的状态码：1借出，2在馆内，3已损坏；

        校园管理系统，学生的状态码：1已入校，2未入校，3休学中

以处理性别字段为代表的两种处理方式：

        1、在数据传递前，先进行转换，直接修改数据对象的属性值（原数据发生了变化而不推荐）

        2、在数据传递前，先新添加一个属性字段，修改新的属性字段，最后渲染的是新字段值

如果要进行新增修改和删除的操作，本来从后端传过来的是1和2，发送请求回去也应该是1和2，而且一般会遵循接口的高复用性，发送请求回去的一般也是数据对象，所以尽量不要修改原数据。

 把状态码数据也进行转换一下后

前端分页功能实现

        分页操作的数据实际就是一个数组，那对数据进行分割的方法有哪些？那不同方法操作的核心就是找规律：每一页显示的是第几条数据到第几条数据。

1、找

 2、复制引入，修改后使用

       ① 总条数功能：

②分页规律公式：

        前端使用slice方法：（当前页数-1）*每页条数 ，当前页数*每页条数

在渲染数据前先对数据进行切片（此时是分页数字显示正确，但实际的分页功能还未实现）

        一：直接绑定：

        二：使用计算属性：

 

       ③ 改变每页条数功能（点击页码，正确跳转）

 ps：这里设定当每条条数改变时，当前页码会回到第一页。

最后调整一下样式：左对齐，上边距

 最后InfoList.vue代码：