发表于： 2019-11-13 19:25:30
1 997
今天完成的事情：
记录一下分页的时候踩到的坑
该怎么写呢，首先从头开始一步一步分析分页吧。
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
layout="total, sizes, prev, pager, next, jumper"
:current-page.sync="currentPage"
:total="listInfoTotal"
:page-size="listPageSize"
:page-sizes="[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]"
>
</el-pagination>
首先上面的是element-ui组件中的分页组件，我们来一行一行代码的分析。
前两个是v-on，点击事件，准确来说是方法，组件自带的两个方法。
这个里面写的是
//分页
handleCurrentChange(val) {
this.searchCont.page=val;
this.getRequest();
},
handleSizeChange(val){
this.searchCont.size=val;
this.currentPage=1;
this.searchCont.page=1;
this.getRequest();
},
this指向的是我里面传过来的值，里面的search Cont是我v-model中绑定的属性。
算了，还是来说说分页主要用到的属性吧，我再这个属性上面栽了跟头。
params
主要就是params，这个是一个跳转传参的方式，要在请求的后面写，分页在跳转的时候，需要用到这个属性，然后this指向到v-model中的形参。如果不用这个跳转传参的话，那就跳转不了页面了。
因为参数传递不了嘛。
在这里加了params之后就可以正常的分页了。
第二个，删除页面。
删除页面挺简单的，发个请求就完了。当然，请求中需要传入需要删除的id：
.png)
关键点发送请求的url那里。只是把请求的url变一下就好了。当然，还有后面的id，也是新的写法。
明天计划的事情：
开始写编辑与上下线功能。
收获：
今天比较充实，起码比前两天好一点，第一个是学会了params，这个是传参的方式，第二个是删除的这个，这个挺简单的，就不说了。
返回列表
评论