Vue+element纯前端封装分页表格

前端小端长

已于 2022-01-19 09:52:59 修改

阅读量621

点赞数

分类专栏：前端常用轮子实现及封装 Vue 文章标签： vue.js 前端 elementui

于 2022-01-17 16:39:19 首次发布

本文链接：https://blog.youkuaiyun.com/zhang1339435196/article/details/122543065

版权

Vue 同时被 2 个专栏收录

25 篇文章

订阅专栏

前端常用轮子实现及封装

13 篇文章

订阅专栏

本文介绍了一个纯前端分页表格组件的实现方式，该组件仅需传入tableData即可完成表格展示与分页功能。使用Element UI框架进行开发，通过调整pageSize和currentPage属性可以灵活控制每页显示的数据数量及当前页数。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<template>
  <!-- 纯前端分页表格，只需传tableData -->
  <el-row>
    <el-col>
      <el-table
        :data="
          tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize)
        "
        style="width: 100%; padding: 0 100px"
      >
        <!-- 插槽放表格列 -->
        <slot />
      </el-table>
    </el-col>
    <el-col>
      <el-pagination
        background
        style="text-align: right"
        :current-page="currentPage"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="tableData.length"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-col>
  </el-row>
</template>
<script>
export default {
  props: {
    tableData: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      pageSize: 10,
      currentPage: 1
    }
  },
  methods: {
    handleSizeChange(size) {
      this.pageSize = size
    },
    handleCurrentChange(current) {
      this.currentPage = current
    }
  }
}
</script>