vue普通表格实现分页

实现Vue普通表格分页的方法

在Vue中实现表格分页功能，可以通过以下步骤完成：

安装依赖（可选） 如果项目需要第三方分页组件，可以安装如element-ui或vxe-table等UI库。以element-ui为例：

npm install element-ui

基础分页实现 在Vue组件中，需要定义数据、分页参数和计算方法：

<template>
  <div>
    <table>
      <tr v-for="item in paginatedData" :key="item.id">
        <td>{{ item.name }}</td>
        <td>{{ item.age }}</td>
      </tr>
    </table>
    <div class="pagination">
      <button @click="prevPage" :disabled="currentPage === 1">上一页</button>
      <span>第 {{ currentPage }} 页</span>
      <button @click="nextPage" :disabled="currentPage === pageCount">下一页</button>
    </div>
  </div>
</template>

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

使用Element UI分页组件 如果使用Element UI，可以简化分页实现：

<template>
  <div>
    <el-table :data="paginatedData">
      <el-table-column prop="name" label="姓名"></el-table-column>
      <el-table-column prop="age" label="年龄"></el-table-column>
    </el-table>
    <el-pagination
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-size="pageSize"
      :total="tableData.length">
    </el-pagination>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      currentPage: 1,
      pageSize: 10
    }
  },
  computed: {
    paginatedData() {
      const start = (this.currentPage - 1) * this.pageSize
      const end = start + this.pageSize
      return this.tableData.slice(start, end)
    }
  },
  methods: {
    handleCurrentChange(val) {
      this.currentPage = val
    }
  }
}
</script>

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

methods: {
  fetchData(page = 1) {
    axios.get(`/api/data?page=${page}&size=${this.pageSize}`)
      .then(response => {
        this.tableData = response.data.items
        this.total = response.data.total
      })
  },
  handleCurrentChange(val) {
    this.fetchData(val)
  }
}

样式优化 可以添加CSS美化分页控件：

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

以上方法可以根据项目需求选择适合的实现方式，基础分页适合简单场景，UI库组件提供更丰富的功能，服务器端分页适合大数据量情况。