Vue+elementUI实现Table表格分页效果

Vue+elementUI实现Table表格分页效果

在毕业项目书写时，需要实现分页效果，而查找了大部分资料，大多是静态Table表格的分页，而该项目的数据大多是后台查询后的动态数据，于是我参考了网上的方法，并进行了一系列的修改后，实现了我的需求，在此，做一个简单的记录，方便日后的巩固学习。

以管理员端admin管理列表为例，
首先是表格，使用:data="tableDate"与数据中的tableDate绑定

<el-table
      :data="tableData"
      border
      style="width: 100%; margin-top:20px;">
      <el-table-column
        type="selection"
        width="55">
      </el-table-column>
      <el-table-column
        fixed
        prop="id"
        label="id"
        width="200">
      </el-table-column>
      <el-table-column
        prop="name"
        label="管理员账户名"
        width="250">
      </el-table-column>
      <el-table-column
        prop="pwd"
        label="密码"
        width="220">
      </el-table-column>
      <el-table-column
        prop="phone"
        label="手机号"
        width="300">
      </el-table-column>
      <el-table-column
        fixed="right"
        label="操作"
        width="200">
        <template slot-scope="scope">
          <el-button type="text" size="small" icon="el-icon-edit" @click="handleEdit(scope.$index,scope.row)">编辑
          </el-button>
          <el-button type="text" size="small" icon="el-icon-delete" @click="handleDelete(scope.$index,scope.row)">删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

分页组件代码如下：

<el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[5,10,15,30,50,100]"
      :page-size="5"
      layout="total, sizes, prev, pager, next, jumper"
      :total="totalCount">
    </el-pagination>
   

data中分页所需的数据,

data() {
    return {
      // 当前页码，初始页码为1
      currentPage:1,
      // 总数据条数，根据接口获取数据长度(注意：这里不能为空)
      totalCount:1,
      // 个数选择器，可选择的单页数据条数
      pageSizes:[5,10,15,30,50,100],
      // 每页显示的条数
      PageSize:5,
     //当前页表格数据
      tableData: [{
        id: 111,
        name: 'aa',
        pwd: 'aa123456',
        phone: '12345678985',
      }],
      //全部表格数据
      allTableData: [{
        id: 111,
        name: 'aa',
        pwd: 'aa123456',
        phone: '12345678985',
      }],

    }
  }

methods、created的相关方法

methods: {
    // 分页
    // 每页显示的条数
    handleSizeChange(PageSize) {
      // 改变每页显示的条数
      this.PageSize=PageSize
      // 每次变换单页条数后，将页面切换至第一页
      this.currentPage=1
      // 获取第一页数据
      this.handleCurrentChange(1);
    },
    // 显示当前页数据
    handleCurrentChange(currentPage) {
      // 更新当前页数据
      this.currentPage=currentPage;
      //每页数据量
      let pageSize = this.PageSize;
      console.log("显示"+currentPage+"列,每页有"+pageSize+"条数据"+(((currentPage-1)*pageSize)+1)+"-"+(currentPage*pageSize));
      //首先清空table表绑定的数据
      this.tableData=[];
      //获取当前页数据范围： （当前页-1）*每页数据 - 当前页*每页数据
      this.tableData=this.allTableData.slice((((currentPage-1)*pageSize)),(currentPage*pageSize));
      
      //方便后台查看表单数据
      //console.log("tableData");
      //console.log(this.tableData);
      //console.log("allTableData");
      //console.log(this.allTableData);
    },
    
    
    findAll() {
      const that = this;
      
      //通过get方法获取后台数据，findAll查询所有数据
      this.axios.get('http://localhost:8080/vue/admin/findAll', {
        params:
          {
            id: this.id,
            name: this.name,
            pwd: this.pwd,
            phone: this.phone,

          }
      }).then(res => {
        console.log("请求成功，得到返回结果:")
        console.log(res);
        //将获取到的所有数据存储到allTableData中，方便分页时进行截取
        that.allTableData = res.data;
        // 将数据的长度赋值给totalCount
        that.totalCount=res.data.length;
        // 显示第一页
        that.handleCurrentChange(1);
        console.log(that.tableData);

      }).catch(function () {
        console.log("请求失败！")
      });
    },
  
  },
  created() {
    this.findAll();
    // 页面加载前查询所有数据
  },

效果展示