vue-element-admin 列表页以及分页(四)

一、mock生成数据

看过我之前的文章的小伙伴都知道我有一个接口地址： https://mock.mengxuegu.com/mock/6063d952f2e38f3a2f6ba42f/xzec 没有意外的话，我做完基本就不更改了，你们可以拿着测试用，我用到接口的地方都会给大家说明。

生成的数据图

二、编写api

在src/api里面进行编写接口，注意：import request 引用的utils/request.js；es6 新语法 ...xx 向xx对象中追加属性；current: current 追加的左右两边值相同，就可以直接写一个；

三、渲染

1. 首先上代码：看到我这么多代码别慌，千万别慌，因为一开始他就只有一行<template><div>分类管理</div></template>；为什么会有这么代码出现了呢，哈哈哈，去elementUI复制！下面跟着我的“jue”步往下走。

2.首先请求数据并打印，查看是否能请求成功

保存刷新页面发现请求成功

给data里面定义的属性赋值

3.把数据放到表格里面：去elementui官网找table，然后选一个看得上的复制过来，比如这个带斑马纹表格。

复制过来之后，需要的就用，不需要的就更改掉。

复制进行修改：里面涉及了数据拦截、三元运算、scope获取当前行的值、el-tag和el-button标签（elementui的，也是直接复制过来的）、标签的@click方法、:type动态赋值

4.详细方法：filters数据拦截器，应用到上面的:type="scope.row.status | statusFilter" 注意拦截器赋值用 | ；

@click对应的编辑和删除

做完上面那些之后页面就会变成下图这个样子，但是你会发现，现在还缺分页和快捷搜索框。那么同样的，分页去elementui复制，搜索框同理。

5.做分页：复制一个全乎的，直接粘到表格底部；

分页变量解释

每次改变分页或者展示数量时要重新请求一遍接口，记住要先给当前data变量赋值，在请求。

6.最后分页的效果

7.顶部添加搜索框：同样的去elementui复制一个你喜欢的。注意这里是form表单

注意我特别划线的几个点：1:model动态绑定data中的query，注意 :xxx 是双向动态绑定！2.size="mini"是form表单的整体大小 3..trim 去除用户输入的前后空格 4.clearable 下拉框选中值后可以点击小叉号进行清除，filterable 可以进行输入搜索 5. vue的v-for循环，里面的statusItem是在下面js中进行定义的 6. icon小图标，去elementui中搜索。

这就是5里面定义的常量

6里面的两个方法，下节我们学习新增和编辑删除

然后此时列表页静态展示已经完成，最终的效果如下图：