开发者学堂课程【微服务+全栈在线教育实战项目演练（SpringCloud Alibaba+SpringBoot）：讲师管理前端-讲师分页和添加】学习笔记，与课程紧密连接，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/667/detail/11337
讲师管理前端-讲师分页和添加
在页面的最下面这一部分，加一个分页条，结构为首页，尾页，上页下页等，加一个分页条，做法比较简单，可以在 Element 找一个分页条。
在表格下面，点击分页，有各种不同的效果，都做了解释。
注意这里它给了一串代码，有一些基本的效果，用的是el，用它就能改成需要的分页，直接改正即可。
找到讲师列表的课件中，有一个叫做分页组件，el的标签一样，用element改出来的。
<--分页--
<el-pagination
current-page=" page
page-size="limit"
total-"total"
style="padding: B0px text-align: center;
layout-"total, prev, pager, next, jumpen"
@current-change-"fetchData"
组件中 el 的标签是和刚刚 el 的标签是一样的，虽然后者是用 element-ui 改出来的，但直接把上面这一段代码复制，改就可以了，不需要去敲。
将它复制到我们的页面中，因为分页肯定在页面的最下面，所以就放到表格的下边
在﹤/el-table 放置分页条，但是需要注意的是，这个需要添加在</div>里。
解释一下分页条怎么来看。
在这个里面我们加了很多的冒号，意思是单向绑定用于取到这里的一些值。
Current-page 表示居于里面的当前页
Page-size 居于每页记录数
total 一共有多少记录
而这三个值，在这里已经定义了，把三个值写到里面即可。
return
list:nu,/查询之后接口返回集合
page:1,//当前页
1imit:10,//每页记录数
total:0,//总记录数
teacherQuery:}条件封装对象
就能够得到当前页，每页记录数和总记录数。
Style=＂padding：30px 0; text-align：center;＂样式是间距和文本显示的内容，不需要去改变，layout就表示显示内容，比如总记录数，显示前页或后页什么的也是一个固定的布局。
这样写有一个好处，强调一下，用 Element-ui 之后它会把分页条的部分，帮助封装，比如传一个总记录数，可以自动正式证出来有多少页的结构，自动生成结构，不需要去写。
按照以前的方式，需要做各种的判断 首页没有上页，最后一页没有下页。这些都不需要了，因为已经封装了，值传过去就可以。
然后有一个@这个符号，表示绑定的事件，表示你做分页的切换。比如第一页点 下一页是第二页，上页是第一页，上下页切换。是上页下页具体操作，具体方法叫 getlist。改正方法，做每次的分页切换，都去调用getlist的方法。
传三个页，把分页调进行封装，每次做分页切换，就是上下页的效果，把 getlist 写到的传过来。
可以添加一个括号，也可以省略不写。比如说做分页，查询默认值为1，如果这么操作，只能查询第一页，不能查询多页。把方法稍微改一下，传个配置，原来的默认值为1。
比如现在查第一页的数据，里面配置的值是1。当你查第二页的数据，配置值变成了2，第三页 第四页都可以，这是做到了一个分页的切换。
不需要再写一个page，需要写一个方法，名字就足够了，需要把方法改一下，因为每次查询的页数都不一样，如果是1表示不传，默认就是1，如果传的话 按照页数进行操作。
getList(page =1){
this.page=pageteacher. getTeacherListPage(this. page, this. limit, this. teacherQuery)
then response请求成功
response接口返回的数据
//console. log( response)
this.list= response.data.rows
this. total= response.data. total
console. log(this. list)
console. log(this. total)
假如page=2，就查第二页的数据，这样就把分页条加上了。
<--分页-->
<el-pagination
current--pagepage每页当前页
:page-size=imit每页记录数
: total="total"总记录数
style="padding: 30px 0; text-align: center;"
layout="total, prev, pager, next, jumper"
current-change-=getList"分页的方法
按照以上把分页条加上，把分页的方法进行修改，添加上页数的参数，页码参数。把参数传给page，做到最后的查询。
//讲师列表的方法
getList(page =1)
this. page page
大部分功能进行封装，直接用即可，比原始写法简单很多。最后看一下效果，F5刷新。
第一次进入查第一页的数据 因为每一页显示十条记录 可以改值，这就是简单的分页条效果，total 表示总记录数，总共有16条。当前为第一页。
第二页六条记录每次点击会跟着发生变化，这是最基本的分页条效果。
直接用 element-ui，非常方便，这是讲师分页功能的实现。
把代码改成自己定义的一些值，在方法位置需要加上页码的切换，如果不加，只能查第一页，加上之后，每次可以查不同的页数。
