vue 实现翻页表

Vue 实现翻页表格的方法

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

安装必要的依赖

如果使用 Element UI 或 Ant Design Vue 等 UI 框架，需要先安装它们。以 Element UI 为例：

npm install element-ui

基础实现代码

<template>
  <div>
    <el-table :data="currentTableData" 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>

    <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 {
  data() {
    return {
      tableData: [], // 所有数据
      currentPage: 1, // 当前页码
      pageSize: 10, // 每页显示数量
    }
  },
  computed: {
    currentTableData() {
      const start = (this.currentPage - 1) * this.pageSize
      const end = start + this.pageSize
      return this.tableData.slice(start, end)
    }
  },
  methods: {
    handleSizeChange(val) {
      this.pageSize = val
    },
    handleCurrentChange(val) {
      this.currentPage = val
    }
  },
  created() {
    // 模拟获取数据
    this.tableData = Array.from({length: 100}, (_, i) => ({
      date: `2023-01-${i + 1}`,
      name: `用户${i + 1}`,
      address: `地址${i + 1}`
    }))
  }
}
</script>

自定义分页逻辑

如果不使用 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 }} 页</span>
      <button @click="nextPage" :disabled="currentPage === totalPages">下一页</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      currentPage: 1,
      pageSize: 10
    }
  },
  computed: {
    currentTableData() {
      const start = (this.currentPage - 1) * this.pageSize
      const end = start + this.pageSize
      return this.tableData.slice(start, end)
    },
    totalPages() {
      return Math.ceil(this.tableData.length / this.pageSize)
    }
  },
  methods: {
    prevPage() {
      if (this.currentPage > 1) {
        this.currentPage--
      }
    },
    nextPage() {
      if (this.currentPage < this.totalPages) {
        this.currentPage++
      }
    }
  }
}
</script>

服务器端分页

对于大数据量，建议使用服务器端分页：

<template>
  <!-- 同上 -->
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      currentPage: 1,
      pageSize: 10,
      total: 0
    }
  },
  methods: {
    fetchData() {
      axios.get('/api/data', {
        params: {
          page: this.currentPage,
          size: this.pageSize
        }
      }).then(response => {
        this.tableData = response.data.items
        this.total = response.data.total
      })
    },
    handleCurrentChange(page) {
      this.currentPage = page
      this.fetchData()
    }
  },
  created() {
    this.fetchData()
  }
}
</script>

样式优化

可以添加一些 CSS 美化分页控件：

.pagination {
  margin-top: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

.pagination button {
  padding: 5px 10px;
  cursor: pointer;
}

.pagination button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

以上方法提供了从简单到复杂的多种实现方式，可以根据项目需求选择适合的方案。