当前位置：首页 > VUE

element vue怎么实现分页

2026-01-21 22:43:19VUE

使用 Element UI 的 Pagination 组件实现分页

Element UI 提供了 el-pagination 组件用于分页功能。以下是一个基本实现示例：

<template>
  <div>
    <el-table :data="currentTableData" style="width: 100%">
      <!-- 表格列定义 -->
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="totalItems">
    </el-pagination>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [], // 所有数据
      currentTableData: [], // 当前页显示的数据
      currentPage: 1,
      pageSize: 10,
      totalItems: 0
    }
  },
  methods: {
    handleSizeChange(val) {
      this.pageSize = val
      this.updateCurrentTableData()
    },
    handleCurrentChange(val) {
      this.currentPage = val
      this.updateCurrentTableData()
    },
    updateCurrentTableData() {
      const start = (this.currentPage - 1) * this.pageSize
      const end = start + this.pageSize
      this.currentTableData = this.tableData.slice(start, end)
    }
  },
  created() {
    // 假设从API获取数据
    fetchData().then(data => {
      this.tableData = data
      this.totalItems = data.length
      this.updateCurrentTableData()
    })
  }
}
</script>

结合后端API实现分页

实际项目中通常需要与后端API配合实现分页：

<template>
  <div>
    <el-table :data="tableData" style="width: 100%">
      <!-- 表格列定义 -->
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      currentPage: 1,
      pageSize: 10,
      total: 0
    }
  },
  methods: {
    handleSizeChange(val) {
      this.pageSize = val
      this.fetchData()
    },
    handleCurrentChange(val) {
      this.currentPage = val
      this.fetchData()
    },
    fetchData() {
      const params = {
        page: this.currentPage,
        size: this.pageSize
      }

      // 调用API获取数据
      getList(params).then(res => {
        this.tableData = res.data.list
        this.total = res.data.total
      })
    }
  },
  created() {
    this.fetchData()
  }
}
</script>

自定义分页样式和功能

el-pagination 组件提供了多种配置选项：

<el-pagination
  background
  :page-size="pageSize"
  :total="total"
  :current-page="currentPage"
  :layout="layout"
  :pager-count="5"
  @size-change="handleSizeChange"
  @current-change="handleCurrentChange"
  :hide-on-single-page="true">
</el-pagination>

分页与表格联动的最佳实践

对于大数据量场景，建议：

使用后端分页，避免前端处理大量数据
添加加载状态提示
考虑添加防抖处理频繁的分页请求
保留用户选择的分页大小偏好（可存储在localStorage中）

<script>
export default {
  data() {
    return {
      loading: false,
      // 其他数据...
    }
  },
  methods: {
    async fetchData() {
      this.loading = true
      try {
        const res = await getList({
          page: this.currentPage,
          size: this.pageSize
        })
        // 处理数据...
      } finally {
        this.loading = false
      }
    }
  }
}
</script>

以上示例展示了Element UI分页的基本用法和常见场景的实现方式，可根据实际需求进行调整。

element vue怎么实现分页