基于el-table和el-pagination实现数据的分页效果流程详解

更新时间：2022年11月29日 09:12:58 作者：Sca_杰

本文主要介绍了基于el-table和el-pagination实现数据的分页效果，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

一、效果图

二、方法

第一步，新建一个el-table，进行如下配置，

:data=>是用于动态json数据赋值给table，

:header-cell-style=>是设置表头的样式，

stripe=>是让table具有斑马背景色，便于观看。

    <el-table :data="tableData"
              :header-cell-style="{background:'#eaeaea'}" stripe>
      <el-table-column prop="date" label="日期" width="140">
      </el-table-column>
      <el-table-column prop="name" label="姓名" width="120">
      </el-table-column>
      <el-table-column prop="job" label="职业" width="120">
      </el-table-column>
      <el-table-column prop="address" label="地址">
      </el-table-column>
    </el-table>

第二步，新建一个el-pagination，

@size-change和@current-change=>处理页码大小和当前页变动时候触发的事件,

:current-page=>当前第几页

:page-sizes=>每页显示多少条数据的选择项

:page-size=>每页显示多少条数据

layout=>页码布局(一下是完整版)

:total=>数据总数

    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="tableData.length">
    </el-pagination>

第三步，配置展示的数据

data () {
    return {
      currentPage: 1,
      pageSize: 10,
      tableData: [
        {
          date: '2016-05-02',
          name: '橘右京',
          job: '刺客',
          address: '上海市普陀区金沙江路 1518'
        },
        {
          date: '2016-05-15',
          name: '鲁班大师',
          job: '辅助',
          address: '上海市普陀区金沙江路 1516'
        }
      ]
    }
  }

第四步，配置点击事件

methods: {
    // @size-change页码展示数量点击事件
    handleSizeChange (val) {
      // 更新每页展示数据size
      this.pageSize = val
    },
    // @current-change页码点击事件
    handleCurrentChange (val) {
      // 更新当前页数是第几页
      this.currentPage = val
    }
  }

第五步，这时候现实的数据是全部显示的，还需要实时修改显示哪些数据，修改el-table中的:table，如下即可。

:data="tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize)"

到了这里就已经成功实现了，以下是完整代码：

<template>
  <div class="block">
    <p>共<span style="color: #ffd04b">{{tableData.length}}</span>条数据</p>
    <el-table :data="tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize)"
              :header-cell-style="{background:'#eaeaea'}" stripe>
      <el-table-column prop="date" label="日期" width="140">
      </el-table-column>
      <el-table-column prop="name" label="姓名" width="120">
      </el-table-column>
      <el-table-column prop="job" label="职业" width="120">
      </el-table-column>
      <el-table-column prop="address" label="地址">
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="tableData.length">
    </el-pagination>
  </div>
</template>
<script>
export default {
  name: 'test2',
  methods: {
    // @size-change页码展示数量点击事件
    handleSizeChange (val) {
      // 更新每页展示数据size
      this.pageSize = val
    },
    // @current-change页码点击事件
    handleCurrentChange (val) {
      // 更新当前页数是第几页
      this.currentPage = val
    }
  },
  data () {
    return {
      currentPage: 1,
      pageSize: 10,
      tableData: [
        {
          date: '2016-05-02',
          name: '橘右京',
          job: '刺客',
          address: '上海市普陀区金沙江路 1518'
        },
        {
          date: '2016-05-03',
          name: '娜可露露',
          job: '刺客',
          address: '上海市普陀区金沙江路 1517'
        },
        {
          date: '2016-05-04',
          name: '鲁班七号',
          job: '射手',
          address: '上海市普陀区金沙江路 1519'
        },
        {
          date: '2016-05-05',
          name: '云中君',
          job: '刺客',
          address: '上海市普陀区金沙江路 1516'
        },
        {
          date: '2016-05-06',
          name: '干将莫邪',
          job: '法师',
          address: '上海市普陀区金沙江路 1516'
        },
        {
          date: '2016-05-07',
          name: '不知火舞',
          job: '法师',
          address: '上海市普陀区金沙江路 1516'
        },
        {
          date: '2016-05-08',
          name: '沈梦溪',
          job: '法师',
          address: '上海市普陀区金沙江路 1516'
        },
        {
          date: '2016-05-09',
          name: '百里守约',
          job: '刺客',
          address: '上海市普陀区金沙江路 1516'
        },
        {
          date: '2016-05-10',
          name: '马可波罗',
          job: '射手',
          address: '上海市普陀区金沙江路 1516'
        },
        {
          date: '2016-05-11',
          name: '孙尚香',
          job: '射手',
          address: '上海市普陀区金沙江路 1516'
        },
        {
          date: '2016-05-12',
          name: '赵云',
          job: '刺客',
          address: '上海市普陀区金沙江路 1516'
        },
        {
          date: '2016-05-13',
          name: '钟无艳',
          job: '战士',
          address: '上海市普陀区金沙江路 1516'
        },
        {
          date: '2016-05-14',
          name: '杨玉环',
          job: '法师',
          address: '上海市普陀区金沙江路 1516'
        },
        {
          date: '2016-05-15',
          name: '鲁班大师',
          job: '辅助',
          address: '上海市普陀区金沙江路 1516'
        }
      ]
    }
  }
}
</script>

到此这篇关于基于el-table和el-pagination实现数据的分页效果流程详解的文章就介绍到这了,更多相关el-table和el-pagination分页内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

CocosCreator入门教程之网络通信
这篇文章主要介绍了CocosCreator的网络通信,内容不多，涉及到的细节，读者可以根据实际情况，自己去延申
2021-04-04
浅谈JavaScript宏任务和微任务执行顺序
本文主要介绍了JavaScript宏任务和微任务执行顺序，结合实例代码进行了详细的讲解，需要的朋友们下面随着小编来一起学习学习吧
2021-06-06
微信小程序自定义组件与页面的相互传参
这篇文章主要为大家介绍了微信小程序自定义组件与页面的相互传参过程详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步早日升职加薪
2022-04-04
Javascript 实现全屏滚动实例代码
这篇文章主要介绍了Javascript 实现全屏滚动实例代码的相关资料,需要的朋友可以参考下
2016-12-12
动态加载JavaScript文件的两种方法
第一种利用ajax方式，第二种是动静创建一个script标签，配置其src属性，经过把script标签拔出到页面head来加载js，感乐趣的网友可以看下
2016-04-04
javascript测试题练习代码
javascript测试题练习代码，需要的朋友可以参考下
2012-10-10
js 根据对象数组中的属性进行排序实现代码
这篇文章主要介绍了js 根据对象数组中的属性进行排序实现代码,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2019-09-09
js操作table示例(个人心得)
有一个表格，然后有4个输入框，一个合并按钮，输入框是这样的，从第几行到第几行，从第几列到第几列，然后点击按钮，合并
2013-11-11
JavaScript浏览器对象模型BOM(BrowserObjectModel)实例详解
这篇文章主要介绍了JavaScript浏览器对象模型BOM(BrowserObjectModel),结合实例形式较为详细的分析了BOM模型的常用对象与相关使用技巧,需要的朋友可以参考下
2016-11-11
详解ES6 扩展运算符的使用与注意事项
扩展运算符 (spread syntax) 是 ES6 提供的一种非常便捷的新语法，给我们操作数组和对象带来了非常大的便利，我在很多文章中也提到了这个语法。但是其实扩展运算符的用法还是比较多比较杂的，我用一篇文章来做一下总结，梳理一下扩展运算的语法和使用细节。
2020-11-11