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

布满荆棘的人生 2022-02-27 02:38 356阅读 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 条评论，356人围观）

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

相关阅读

相关 Html表格分页

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR

一时失言乱红尘/ 2024年02月17日 14:06/ 0 赞/ 52 阅读

相关 Vue + Element UI 表格分页记忆选中

官方基于这种操作给出通过属性解决的方法： :row-key：行数据的 Key ，用来优化 Table 的渲染；在使用 reserve-selection 功能与显示树形数据时

港控/mmm°/ 2023年10月11日 16:47/ 0 赞/ 44 阅读

相关 vue的表格和分页

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

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

相关表格排序+分页

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

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

相关 Bootstrap实现表格分页

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

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

相关 EasyUI实现表格分页

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

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

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

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

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

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

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

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

相关 layui表格+pagehelper实现分页

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

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

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

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

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