当前位置：首页 > VUE

vue实现分页表

2026-01-17 12:42:14VUE

Vue 实现分页表格

在 Vue 中实现分页表格通常需要结合表格组件和分页组件，以下是常见的实现方法：

使用 Element UI 实现分页表格

安装 Element UI：

npm install element-ui

在 main.js 中引入：

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)

组件实现：

<template>
  <div>
    <el-table :data="currentTableData" border>
      <el-table-column prop="date" label="日期"></el-table-column>
      <el-table-column prop="name" label="姓名"></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, 30, 40]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="tableData.length">
    </el-pagination>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [], // 全部数据
      currentPage: 1,
      pageSize: 10,
      currentTableData: [] // 当前页数据
    }
  },
  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)
    }
  },
  mounted() {
    // 模拟获取数据
    this.tableData = Array.from({length: 100}, (_, i) => ({
      date: `2023-01-${i+1}`,
      name: `用户${i+1}`,
      address: `地址${i+1}`
    }))
    this.updateCurrentTableData()
  }
}
</script>

使用原生 Vue 实现分页表格

如果不使用 UI 框架，可以原生实现：

<template>
  <div>
    <table>
      <thead>
        <tr>
          <th>日期</th>
          <th>姓名</th>
          <th>地址</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in currentTableData" :key="item.id">
          <td>{{ item.date }}</td>
          <td>{{ item.name }}</td>
          <td>{{ item.address }}</td>
        </tr>
      </tbody>
    </table>

    <div class="pagination">
      <button @click="prevPage" :disabled="currentPage === 1">上一页</button>
      <span>第 {{ currentPage }} 页 / 共 {{ totalPages }} 页</span>
      <button @click="nextPage" :disabled="currentPage === totalPages">下一页</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      currentPage: 1,
      itemsPerPage: 10
    }
  },
  computed: {
    currentTableData() {
      const start = (this.currentPage - 1) * this.itemsPerPage
      const end = start + this.itemsPerPage
      return this.tableData.slice(start, end)
    },
    totalPages() {
      return Math.ceil(this.tableData.length / this.itemsPerPage)
    }
  },
  methods: {
    prevPage() {
      if (this.currentPage > 1) this.currentPage--
    },
    nextPage() {
      if (this.currentPage < this.totalPages) this.currentPage++
    }
  },
  mounted() {
    // 模拟获取数据
    this.tableData = Array.from({length: 100}, (_, i) => ({
      id: i+1,
      date: `2023-01-${i+1}`,
      name: `用户${i+1}`,
      address: `地址${i+1}`
    }))
  }
}
</script>

<style>
table {
  width: 100%;
  border-collapse: collapse;
}
th, td {
  border: 1px solid #ddd;
  padding: 8px;
}
.pagination {
  margin-top: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
}
</style>

使用 Vue 3 Composition API 实现

Vue 3 可以使用 Composition API 更简洁地实现：

<template>
  <!-- 表格和分页组件同上 -->
</template>

<script setup>
import { ref, computed } from 'vue'

const tableData = ref(Array.from({length: 100}, (_, i) => ({
  id: i+1,
  date: `2023-01-${i+1}`,
  name: `用户${i+1}`,
  address: `地址${i+1}`
})))

const currentPage = ref(1)
const itemsPerPage = ref(10)

const currentTableData = computed(() => {
  const start = (currentPage.value - 1) * itemsPerPage.value
  const end = start + itemsPerPage.value
  return tableData.value.slice(start, end)
})

const totalPages = computed(() => 
  Math.ceil(tableData.value.length / itemsPerPage.value)
)

function prevPage() {
  if (currentPage.value > 1) currentPage.value--
}

function nextPage() {
  if (currentPage.value < totalPages.value) currentPage.value++
}
</script>