vue+element-ui实现分页

Posted buries

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue+element-ui实现分页相关的知识,希望对你有一定的参考价值。

我使用得是el-table+el-pagination来实现的,
话不多说,直接上代码

html代码部分

<!-- table -->
    <el-table :data="showData" stripe style="width:100%" v-loading="listLoading">
      <el-table-column type="selection" width="55"></el-table-column>
      <!-- <el-table-column type="index" prop="id" label="编号" width="100" sortable></el-table-column> -->
      <el-table-column prop="id" label="编号" width="100" sortable></el-table-column>
      <el-table-column prop="name" label="姓名" width="100" sortable></el-table-column>
      <el-table-column prop="sex" label="性别" width="100" sortable></el-table-column>
      <el-table-column prop="age" label="年龄" width="100" sortable></el-table-column>
      <el-table-column prop="birthday" label="生日" width="120" sortable></el-table-column>
      <el-table-column prop="address" label="地址" min-width="180" sortable></el-table-column>
      <el-table-column label="操作">
        <template scope="scope">
          <!-- <el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button type="danger" size="small" @click="handleDel(scope.$index, scope.row)">删除</el-button>-->
          <el-button size="small" @click="handleEdit(scope.row)">编辑</el-button>
          <el-button type="danger" size="small" @click="handleDel(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- table 传值 -->
    <!-- <List :message=‘byValue‘></List> -->

    <!-- 分页 paging -->
    <el-pagination 
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
    :current-page="currentPage"
    :page-size="pageSize" 
    layout="total, prev, pager, next"
    background
    :total="total" 
    ></el-pagination>

javascript代码部分

export default 
  name: "Dashbord",
  components: 
    Dialog
  ,
  inject: ["reload"], //注入reload方法
  data() 
    return 
      showData:[],
      total: 0,
      pageSize: 10,
      listLoading: false,
      currentPage:1,
    ;
  ,
  created()
    this.getUsers();
    this.showTable(this.currentPage,this.pageSize);
  ,
  // mounted() 
  //   this.getUsers();
  // ,
  methods: 
   handleSizeChange: function (size) 
      this.pageSize = size;
      console.log(this.pageSize);  //每页下拉显示数据
      this.showTable(this.currentPage,this.pageSize);
    ,
    handleCurrentChange: function(currentPage)
      this.currentPage = currentPage;
      console.log(this.currentPage);  //点击第几页
      this.showTable(this.currentPage,this.pageSize);

    ,
    showTable(currentPage,pageSize)
      this.listLoading = true;
      this.$axios(
        method: "POST",
        url: "http://localhost:8080/api/pagingQuery",
        changeOrigin: true,
        data: 
          "start":currentPage,
          "pageSize":pageSize
        
      ).then(result => 
        this.listLoading = false;
        this.showData = result.data;
      );
    
  ,
;
</script>

在el-table中,最重要的是:data,这个数据是根据你分页效果去后台请求返回的数据。
在el-pagination中,:page-size表示每页显示的数据条数;
:total:表示总的数据数量;
:page-sizes:表示我们可以自定义每页显示的数量;
:currentPage:表示当前的页码;
@size-change="handleSizeChange",@current-change="handleCurrentChange" 是el-pagination中的事件,表示每页显示的数据和页码的变化;
layout:表示分页栏的布局;
background:表示是否带背景色

需要主要的是start变量,因为在后台程序中,我使用的是limit(m,n)来进行分页查询的:

select * from list limit #start,#pageSize

start表示开始查询的位置,pageSize表示从开始位置要查询的数量; 如果后台没有做start的处理,在这里我们可以在showTable方法中做处理:

currentPage = (currentPage-1) * pageSize;

这样就能够正确查询数据

以上是关于vue+element-ui实现分页的主要内容,如果未能解决你的问题,请参考以下文章

vue中使用element-ui实现分页

git--------------vue+element-ui实现分页效果-------------劉

Vue + element-ui 前端项目一Table 表格并实现分页 2

vue+element+axios实现分页

vue+element-ui实现分页

vue+Element-ui实现分页效果