vue实现表格分页显示

Vue实现表格分页显示的方法

使用Element UI的Pagination组件

Element UI提供了现成的分页组件，配合表格可以快速实现分页功能。需要安装Element UI库。

<template>
  <div>
    <el-table :data="currentTableData" border>
      <el-table-column prop="name" label="姓名"></el-table-column>
      <el-table-column prop="age" 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="total">
    </el-pagination>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [], // 全部数据
      currentTableData: [], // 当前页数据
      currentPage: 1,
      pageSize: 10,
      total: 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() {
    // 模拟获取数据
    this.tableData = Array.from({length: 100}, (_, i) => ({
      name: `用户${i+1}`,
      age: Math.floor(Math.random() * 50) + 18
    }))
    this.total = this.tableData.length
    this.updateCurrentTableData()
  }
}
</script>

使用自定义分页逻辑

如果不使用UI框架，可以手动实现分页功能。

<template>
  <div>
    <table>
      <tr v-for="item in currentPageData" :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 === totalPages">下一页</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      allData: [],
      currentPageData: [],
      currentPage: 1,
      itemsPerPage: 10,
      totalPages: 0
    }
  },
  computed: {
    totalPages() {
      return Math.ceil(this.allData.length / this.itemsPerPage)
    }
  },
  methods: {
    updatePageData() {
      const start = (this.currentPage - 1) * this.itemsPerPage
      const end = start + this.itemsPerPage
      this.currentPageData = this.allData.slice(start, end)
    },
    prevPage() {
      if (this.currentPage > 1) {
        this.currentPage--
        this.updatePageData()
      }
    },
    nextPage() {
      if (this.currentPage < this.totalPages) {
        this.currentPage++
        this.updatePageData()
      }
    }
  },
  created() {
    // 模拟数据
    this.allData = Array.from({length: 100}, (_, i) => ({
      id: i,
      name: `用户${i+1}`,
      age: Math.floor(Math.random() * 50) + 18
    }))
    this.updatePageData()
  }
}
</script>

使用Vuex管理分页状态

对于大型应用，可以使用Vuex集中管理分页状态。

// store.js
export default new Vuex.Store({
  state: {
    tableData: [],
    pagination: {
      currentPage: 1,
      pageSize: 10,
      total: 0
    }
  },
  mutations: {
    SET_TABLE_DATA(state, data) {
      state.tableData = data
      state.pagination.total = data.length
    },
    SET_CURRENT_PAGE(state, page) {
      state.pagination.currentPage = page
    },
    SET_PAGE_SIZE(state, size) {
      state.pagination.pageSize = size
    }
  },
  getters: {
    currentPageData: state => {
      const start = (state.pagination.currentPage - 1) * state.pagination.pageSize
      const end = start + state.pagination.pageSize
      return state.tableData.slice(start, end)
    }
  }
})

结合后端API分页

实际项目中，通常需要从后端API获取分页数据。

methods: {
  async fetchData(page = 1, size = 10) {
    try {
      const response = await axios.get('/api/data', {
        params: {
          page,
          size
        }
      })
      this.tableData = response.data.items
      this.total = response.data.total
      this.currentPage = page
      this.pageSize = size
    } catch (error) {
      console.error('获取数据失败', error)
    }
  }
}

性能优化建议

对于大数据量表格，可以考虑虚拟滚动技术替代传统分页。Element UI的Table组件支持虚拟滚动，或者使用专门的虚拟滚动库如vue-virtual-scroller。

<el-table
  :data="tableData"
  height="500"
  v-loading="loading"
  border>
  <!-- 列定义 -->
</el-table>

以上方法可以根据项目需求和技术栈选择适合的实现方式。Element UI方案适合快速开发，自定义方案提供更多灵活性，后端分页适合大数据量场景，Vuex方案适合状态复杂的应用。