发表于: 2019-11-12 22:38:20

1 1014


今天完成的事情:


今天开始写分页,打算今天做完的,用到的还是饿了么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();


这里面的东西我还是没有写好。


明天计划的事情:把分页做完,开始写增删改查。

收获:


分页这个东西其实不难,我是没有好好去想想怎么写这个玩意,也没找对教程,明天继续努力。



返回列表 返回列表
评论

    分享到