vue + element-ui 实现分页效果

浅浅的花香味﹌ 2021-11-09 02:52 335阅读 0赞

##### 我使用得是el-table+el-pagination来实现的， #####

###### 话不多说，直接上代码 ######

<el-table :data="showData" stripe style="width:100%" v-loading="listLoading">
          <el-table-column type="selection" width="55"></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.row)">编辑</el-button>
              <el-button type="danger" size="small" @click="handleDel(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
    
        
        
    
        
        <el-pagination 
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-size="pageSize" 
        layout="total, prev, pager, next"
        background
        :total="total" 
        ></el-pagination>
        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；

这样就能够正确查询数据