从零开始一步一步教你使用element ui table 做前端分页和后端分页

最新推荐文章于 2024-01-19 11:29:22 发布

来时有风月

最新推荐文章于 2024-01-19 11:29:22 发布

阅读量1.1k

点赞数 3

分类专栏：前端开发文章标签： element ui 分页

本文链接：https://blog.csdn.net/qq_41505685/article/details/104027125

版权

前端开发专栏收录该内容

6 篇文章 0 订阅

订阅专栏

主要是自己这段时间用vue+element ui的一些经验所得吧，适合刚入手的小白，话不多说，直接上干货......

这里为了直观，从开始一步一步来操作，只要一步一步看肯定能学会，加油，有问题可以咨询QQ1669819167

全天在线，欢迎打扰！抱拳ing！

项目中引入element ui 就不用说了吧......

一、用到的技术栈

二、数据展示

三、前端分页

一、用到的技术栈

vue会用就行了：https://cn.vuejs.org/v2/guide/
先上element ui的官网：https://element.eleme.cn/#/zh-CN/component/installation
axios，这里不涉及二次封装，直接用封装好的axios......

二、数据展示

1.demo.vue

<template>
  <div class="app-container"></div>
</template>
<script>
export default {
  data() {
    return {}
  },
  created() {},
  methods: {}
}
</script>
<style lang="scss" scoped>
</style>

2. 添加table

<template>
  <div class="app-container">
    <template>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="date" label="日期" width="180"></el-table-column>
        <el-table-column prop="name" label="姓名" width="180"></el-table-column>
        <el-table-column prop="address" label="地址"></el-table-column>
      </el-table>
    </template>
  </div>
</template>

3.模拟数据，把tableData放在return里面

  // 拿到的数组
      tableData: [
        {
          date: '2016-05-02', //data,name,address  要和html里面的 prop 一一对应
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        },
        {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        },
        {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        },
        {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        }
      ]
    }

这个时候已经显示出来了，由于后面分页我们要把数据多造一点，因为太占空间，所以文章里我就不加了，看效果！

一般我们数据太多一个页面展示不下就会考虑到分页，

然后分页又分为纯前端分页，和前后端分页，这里我们先了解第一种前端分页

三、前端分页

1.分页需要当前页数和当前页显示的数据条数，以及重要的分页器，看代码！

分页器：

<template>
  <div class="app-container">
    <!-- table数据展示 -->
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="date" label="日期" width="180"></el-table-column>
      <el-table-column prop="name" label="姓名" width="180"></el-table-column>
      <el-table-column prop="address" label="地址"></el-table-column>
    </el-table>
    <!-- 分页器 -->
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[5, 10, 20, 40]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="tableData.length"
        background
      ></el-pagination>
    </div>
  </div>
</template>

当前页和当前页显示条数（在之前的return里面添加currentPage和pageSize）

    return {
      currentPage: 1, // 默认第1页
      pageSize: 5, // 默认显示5条
      // 拿到的数组
      tableData: [...]
    }

这个时候分页，总条数都出来了，但是还不能用，效果图：

想要真正的分页还得加上一句代码，两个函数

tableData.slice((currentPage - 1) * pagesize, currentPage * pagesize)

    <!-- table数据展示 -->
    <el-table :data="tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize)" 
     style="width: 100%">
      <el-table-column prop="date" label="日期" width="180"></el-table-column>
      <el-table-column prop="name" label="姓名" width="180"></el-table-column>
      <el-table-column prop="address" label="地址"></el-table-column>
    </el-table>

函数：

methods: {
    // 初始页currentPage、初始每页数据数pageSize和数据data
    
    // 每页显示条数
    handleSizeChange(pageSize) {
      this.pageSize = pageSize
      console.log(this.pageSize) // 每页下拉显示数据
    },
    // 当前页
    handleCurrentChange(currentPage) {
      this.currentPage = currentPage
      console.log(this.currentPage)
    }
  }

前端分页完成，功能都实现了，就不一一演示，看效果图：

这是前端分页，要是有觉得有用的朋友，不妨留下个评论，或者有什么错误的地方欢迎指出来！第二种的话，有时间再写吧

贴个总的代码：

<template>
  <div class="app-container">
    <!-- table数据展示 -->
    <el-table
      :data="tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize)"
      style="width: 100%"
    >
      <el-table-column prop="date" label="日期" width="180"></el-table-column>
      <el-table-column prop="name" label="姓名" width="180"></el-table-column>
      <el-table-column prop="address" label="地址"></el-table-column>
    </el-table>
    <!-- 分页器 -->
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        background
        :current-page="currentPage"
        :page-sizes="[5, 10, 20, 40]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="tableData.length"
      ></el-pagination>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      currentPage: 1, // 默认第1页
      pageSize: 5, // 默认显示5条
      totalSize: 0, // 默认总条数为0 这个无所谓，前端分页可以计算数组的length
      // 拿到的数组
      tableData: [
        {
          date: '2016-05-02', //data,name,address  要和html里面的 prop 一一对应
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        },
        {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        },
        {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        },
        {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        },
        {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        },
        {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        },
        {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        },
        {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        },
        {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        },
        {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        },
        {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        },
        {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        },
        {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        }
      ]
    }
  },
  created() {},
  methods: {
    // 初始页currentPage、初始每页数据数pageSize和数据data

    // 每页显示条数
    handleSizeChange(pageSize) {
      this.pageSize = pageSize
      console.log(this.pageSize) // 每页下拉显示数据
    },
    // 当前页
    handleCurrentChange(currentPage) {
      this.currentPage = currentPage
      console.log(this.currentPage)
    }
  }
}
</script>
<style lang="scss" scoped>
</style>

最后,用到的一些属性或者方法：

table，Pagination

来时有风月

关注

3
点赞
踩
13

收藏

觉得还不错? 一键收藏
0
评论
从零开始一步一步教你使用element ui table 做前端分页和后端分页

主要是自己这段时间用vue+element ui的一些经验所得吧，适合刚入手的小白，话不多说，直接上干货......这里为了直观，从开始一步一步来操作，只要一步一步看肯定能学会，加油，有问题可以咨询QQ1669819167全天在线，欢迎打扰！抱拳ing！项目中引入element ui 就不用说了吧......目录一、用到的技术栈二、数据展示三、前端分页一、用到...
复制链接

扫一扫