element table分页(elementui 表格分页排序)

首先，mock生成数据。看过我之前文章的朋友都知道我有一个接口地址：https://mock.mengxuegu.com/mock/6063d952f2e38f3a2f6ba42f/xzec.如果不出意外，我写完就不改了。你可以拿去测试，我会给你解释我用接口的地方。
生成的数据图
二、在src/api中写api写接口，注意：utils/request . js；被导入请求引用；Es6新语法.xx向xx对象追加属性；Current: current追加相同的左右值，可以直接写一个；
三、渲染1。首先是代码：看到我这么多代码不要慌，因为刚开始的时候，分类管理只有一行。
;为什么会有这样的代码？哈哈哈去elementUI复制一下！下面跟着我的“爵”下台。
2.先请求数据并打印出来，看请求能否成功。
成功保存页面发现请求。
为数据中定义的属性赋值
3.把数据放到表格里：去elementui官网找表格，然后选一个好看的表格复制，比如这个斑马纹的表格。
抄完之后，用你需要的，改你不需要的。
复制修改：涉及数据截取、三元运算、获取当前行值的范围、el-tag和el-button标签(也是直接从elementui复制过来的)、标签的@click方法、type的动态赋值。
4.详细方法：filters数据拦截器，应用于上面的： type=’ scope . row . status | status filter ‘。请注意，拦截器被赋予了|；
@点击相应的编辑和删除
完成上述操作后，页面将如下图所示，但您会发现分页和快捷搜索框仍然缺失。同理，分页复制到elementui，搜索框也是一样的。
5.制作分页：复制一个完整的，直接贴在表格底部；
分页变量解释
每次你改变分页或显示的次数，你都应该重新请求接口。记住在请求之前给当前数据变量赋值。
6.最后一次分页的效果
7.在顶部添加一个搜索框：同样地，去elementui复制一个你喜欢的。注意这是表单表单。
注意我特别强调的几点：1:model动态绑定查询in data，注意：xxx是双向动态绑定！2.size=’mini ‘是表单的整体大小。3.Trim删除用户输入的前后空格。4.清除下拉框可以点击小十字来清除数值。filterable可以搜索输入。5.vue的v-for循环，其中statusItem是一个6的小图标。下面js中定义的图标。转到elementui并搜索。
这是5中定义的常数。
在下一节中，我们将学习添加、编辑和删除两种方法。
那么列表页面的静态显示就完成了，最终效果如下：