vue Element-ui（el-table、el-pagination）实现表格分页

布满荆棘的人生 2022-02-27 02:38 286阅读 0赞

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MjE1MDQy_size_16_color_FFFFFF_t_70]  
HTML代码：（重点关注el-table中:data数据的绑定）  
el-pagination中：  
layout代表组件布局，子组件名用逗号分隔  
属性： total代表总条目数  
事件： current-change用于监听页数改变，而内容也发生改变  
html

<template>
        <el-main>
        <el-input placeholder="请输入要搜索的联系人" prefix-icon="el-icon-search" v-model="searchFile"></el-input>
          <el-table :data="tableData"  v-loading="loading" border  height="680px" style="width: 100%">
          <el-table-column label="编号" width="100" prop="id">
          </el-table-column>
          <el-table-column  label="姓名"  prop="name"  width="100">
          </el-table-column>
          <el-table-column  label="电话"  prop="phone"  width="180">
          </el-table-column>
          <el-table-column  label="生日"  prop="brithday"  width="80">
          </el-table-column>
          <el-table-column  label="性别"  prop="gender"  width="80">
          </el-table-column>
          <el-table-column  label="年龄"  prop="age"  width="80">
          </el-table-column>
          <el-table-column  label="住址"  prop="address"  width="280">
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                @click="handleDelete(scope.$index, scope.row)"
                size="mini"
                type="danger">联系ta
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        
        <el-pagination
          background      
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[5,10,15]"
          :page-size="pagesize"
          layout="total,jumper,prev, pager, next,sizes"
          :total="files_count"
        ></el-pagination>
        </el-main>
    </template>

js

<script>
    import {
      selectphoneAll
    } from "@/api/files";//获取数据的接口
        export default {
            name: "phoneList",
            data(){
                let tableDataAll = [];
                return{
                    tableData:[],
                    // 是否加载数据
                    loading:true,
                    currentPage:1,
                    pagesize:10,
                    files_count:5,
                    fileList:[],
                    searchFile:"",
                    
                };
            },
             created: function() {
        this.hadleGetFilesListApi();
      },
        methods:{
        //分页 初始页currentPage、初始每页数据数pagesize和数据testpage--->控制每页几条
        handleSizeChange:function(size){
            this.pagesize = size;
            this.hadleGetFilesListApi();
            console.log(this.pagesize)
            console.log(this.hadleGetFilesListApi())
        },
        // 控制页面的切换
        handleCurrentChange: function(currentPage) {
            this.currentPage = currentPage;
            // console.log(currentPage)
            this.hadleGetFilesListApi();
        },
        //对所有数据进行分页处理 发送请求
        hadleGetFilesListApi() {
          selectphoneAll(this.currentPage, this.pagesize)
            .then(res => {
              console.log("111"+res);
              this.tableData = res.data.filesInfo;
              console.log("3333"+this.tableData);
              this.files_count = res.data.files_count;
              this.tableDateAll = res.data.filesInfo;
              this.loading = false;
            })
            .catch({});
        }
        }
    }
    </script>

接口参考（）

export function selectphoneAll(page, size) {
      return request(
        {
          url:"admin/selectphoneAll",
          method:'post',
          params:{page, size}
    
        }
      )
    }

用到的sql语句

//查询user表总共有多少行数据
    select count(*) from user
    //分页	页数  每页数据量
    select * from user   limit #{start},#{size}

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MjE1MDQy_size_16_color_FFFFFF_t_70 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MjE1MDQy_size_16_color_FFFFFF_t_70]: /images/20220227/d925d144ffba4d3ca90f8180b6a998bc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MjE1MDQy_size_16_color_FFFFFF_t_70 1]: /images/20220227/d9e54daec1914aa6ad8f2ac19ef31c51.png

发表评论取消回复

表情：

评论列表（有 0 条评论，286人围观）

还没有评论，来说两句吧...

相关阅读

相关 layui数据表格分页简单实现

首先要了解layui分页和一般的后台分页不一样。至少：我用的layui是基于前台分页的。后台分页，都是根据前台传递了pageNum和limit这些分页参送给后台，后

今天药忘吃喽~/ 2022年12月19日 13:08/ 0 赞/ 153 阅读

相关 vue的表格和分页

前面有提到在vue里面，对于表格的使用：vue2.0 + element-ui 实战项目-渲染表格(四)[https://www.jianshu.com/p/fea8cacc0

骑猪看日落/ 2022年11月03日 01:33/ 0 赞/ 99 阅读

相关表格排序+分页

因为无聊封装了一个表格排序加分页的程序结果写完后变的更无聊了........ <style type="text/css"> .tab\{border:\CCCCC

刺骨的言语ヽ痛彻心扉/ 2022年08月24日 04:22/ 0 赞/ 207 阅读

相关 Bootstrap实现表格分页

1.官网下载Bootstrap地址：[https://v3.bootcss.com/getting-started/\download][https_v3.bootcss.co

怼烎@/ 2022年05月20日 09:28/ 0 赞/ 223 阅读

相关 EasyUI实现表格分页

1.官网下载EasyUI地址：[http://www.jeasyui.com/download/list.php][http_www.jeasyui.com_download_

迷南。/ 2022年05月18日 23:14/ 0 赞/ 263 阅读

相关 Vue实现分页组件

最近使用vue2.0重构项目, 需要实现一个分页的表格, 没有找到合适的分页组件, 就自己写了一个, 效果如下: ![1055753-20170621203654163-89

た入场券/ 2022年05月14日 00:44/ 0 赞/ 271 阅读

相关 vue+element-表格的分页实现

今天简单的介绍一下element的分页是怎么实现的，先说一下感受，之前一直是使用的jQuery的分页，其实也不全算是，使用的本质还是BootStrapUI的分页，感兴趣的可以翻

约定不等于承诺〃/ 2022年03月17日 09:20/ 0 赞/ 395 阅读

相关 Vue + ElementUI实现动态获取表格数据并分页

首先，引用必需的js和css文件，这里我已经下载到本地了，你们改成自己的地址就行。  <link rel="stylesheet"

雨点打透心脏的1/2处/ 2022年03月17日 05:56/ 0 赞/ 1160 阅读

相关 layui表格+pagehelper实现分页

在layui表格中增加属性page:true layui默认会传回两个参数，一个是limit,另一个是page; 其中limit是每页的条数，page是标识第几页然后我

╰+攻爆jí腚メ/ 2022年01月06日 00:11/ 0 赞/ 493 阅读

相关 Vue - 纯前端（Vue + ElementUI）实现 table 表格分页功能

一. 思路 1. 如何获取当前页数据的第一条和最后一条的数据在总数据中的位置 2. 获取到当前页数据的第一条和最后一条的数据在总数据中的位置，怎么获取到对应的数据 3

柔情只为你懂/ 2021年07月25日 17:36/ 0 赞/ 508 阅读