发表于: 2019-11-12 22:38:20
1 1015
今天完成的事情:
今天开始写分页,打算今天做完的,用到的还是饿了么ui的组件,但是这个组件的用法,感觉很奇怪,还是我不会用:
<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>
这个是写的html里面的没毛病, 但是js里面怎么写着实让我头疼了一把。
这是Element-ui提供的完整的例子
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | <template> <div class="block"> <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[100, 200, 300, 400]"//这事下拉框可以选择的,选择一夜显示几条数据 :page-size="100" //这是当前煤业显示的条数 layout="total, sizes, prev, pager, next, jumper" :total="400" //这个是总共有多少条数据,把后台获取到的数据总数复制给total就可以了 > </el-pagination> </div> </template> <script> export default { methods: { handleSizeChange(val) { console.log(`每页 ${val} 条`); }, handleCurrentChange(val) { console.log(`当前页: ${val}`); } }, data() { return { total:'0', currentPage: 4 }; } } </script> |
主要的就是如何去修改传递的值,怎么去传递这个值,这个是我要考虑的问题,我一直在网上找教程,却没有去认真的想这个问题,感觉有些偏离主题了。。。
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
这里有两个点击事件,准确来说就是方法,方法里面有固定的内容,我们的传递的值都是围绕着这个方法来实现的。
//分页
handleCurrentChange(val) {
this.searchCont.page=val;
this.getRequest();
},
handleSizeChange(val){
this.searchCont.size=val;
this.currentPage=1;
this.searchCont.page=1;
this.getRequest();
这里面的东西我还是没有写好。
明天计划的事情:把分页做完,开始写增删改查。
收获:
分页这个东西其实不难,我是没有好好去想想怎么写这个玩意,也没找对教程,明天继续努力。
评论