（二十八）VueCli3.0全栈——分页功能

1、Fundlist.vue中

• 在table下面添加

<!-- 分页 -->
      <el-row>
          <el-col :span="24">
              <div class="pagination">
                    <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page.sync="paginations.page_index"
                        :page-sizes="paginations.page_sizes"
                        :page-size="paginations.page_size"
                        :layout="paginations.layout"
                        :total="paginations.total">
                    </el-pagination>
              </div>
          </el-col>
      </el-row>

• data里面添加属性

paginations:{
            page_index:1,  //当前位于哪页
            total:0,       //总数
            page_size:5,   //一页显示多少条
            page_sizes:[5,10,15,20],  //每页显示多少条
            layout:'total,sizes,prev,pager,next,jumper' //翻页属性
        },

• style里面添加样式

.pagination{
    text-align: right;
    margin-top: 10px;
}

• data里面添加：

allTableData:[]

• 获取数据进行修改，设置分页数据

getProfile() {
      // 获取表格数据
      this.$axios
        .get("/api/profiles")
        .then(res => {
          this.allTableData = res.data;
            //   设置分页数据
            this.setPaginations();

        })
        .catch(err => console.log(err));
    },

• 分页设置

setPaginations(){
        // 分页属性初始化设置
        this.paginations.total = this.allTableData.length;
        this.paginations.page_index=1;
        this.paginations.page_size=5;
        // 设置默认的分页数据
        this.tableData = this.allTableData.filter((item,index)=>{
            return index<this.paginations.page_size
        })
    },
    handleSizeChange(page_size){
        // 切换size
        this.paginations.page_index=1;
        this.paginations.page_size=page_size;
        this.tableData = this.allTableData.filter((item,index)=>{
            return index<page_size;
        })
    },
    handleCurrentChange(page){
        // 获取当前页
        let index = this.paginations.page_size*(page-1);
        // 数据的总数
        let nums = this.paginations.page_size*page;
        // 容器
        let tables = [];
        for(let i= index;i<nums;i++){
            if(this.allTableData[i]){
                tables.push(this.allTableData[i]);
            }
            this.tableData=tables;
        }
    }
  }

2、效果图

测试 测试