vue实现查询分页

Vue 实现查询分页的方法

基本分页实现

在Vue中实现分页通常需要结合后端API，前端处理分页逻辑和UI展示。以下是一个基于Element UI的分页组件示例：

<template>
  <div>
    <el-table :data="tableData">
      <!-- 表格列定义 -->
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[10, 20, 30, 50]"
      :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: {
    fetchData() {
      const params = {
        page: this.currentPage,
        size: this.pageSize
      }
      // 调用API获取数据
      api.getList(params).then(res => {
        this.tableData = res.data.list
        this.total = res.data.total
      })
    },
    handleSizeChange(val) {
      this.pageSize = val
      this.fetchData()
    },
    handleCurrentChange(val) {
      this.currentPage = val
      this.fetchData()
    }
  },
  created() {
    this.fetchData()
  }
}
</script>

查询与分页结合

实现带查询条件的分页功能，需要在请求参数中加入查询条件：

<template>
  <div>
    <el-form :inline="true" @submit.native.prevent="handleSearch">
      <el-form-item>
        <el-input v-model="searchQuery" placeholder="请输入关键词"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleSearch">查询</el-button>
      </el-form-item>
    </el-form>

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

<script>
export default {
  data() {
    return {
      searchQuery: '',
      // 其他分页数据...
    }
  },
  methods: {
    handleSearch() {
      this.currentPage = 1  // 重置到第一页
      this.fetchData()
    },
    fetchData() {
      const params = {
        page: this.currentPage,
        size: this.pageSize,
        keyword: this.searchQuery
      }
      // 调用API
    }
  }
}
</script>

使用Vuex管理分页状态

对于复杂应用，可以使用Vuex集中管理分页状态：

// store/modules/list.js
const state = {
  list: [],
  pagination: {
    page: 1,
    size: 10,
    total: 0
  },
  query: ''
}

const actions = {
  fetchList({ commit, state }) {
    return api.getList({
      page: state.pagination.page,
      size: state.pagination.size,
      keyword: state.query
    }).then(res => {
      commit('SET_LIST', res.data.list)
      commit('SET_TOTAL', res.data.total)
    })
  }
}

// 组件中
import { mapState, mapActions } from 'vuex'

export default {
  computed: {
    ...mapState('list', ['list', 'pagination', 'query'])
  },
  methods: {
    ...mapActions('list', ['fetchList']),
    handleSearch() {
      this.$store.commit('list/RESET_PAGE')
      this.fetchList()
    }
  }
}

无UI库的纯Vue分页实现

如果不使用UI库，可以手动实现分页组件：

<template>
  <div class="pagination">
    <button 
      @click="changePage(currentPage - 1)"
      :disabled="currentPage === 1">
      上一页
    </button>

    <button
      v-for="page in pages"
      :key="page"
      @click="changePage(page)"
      :class="{ active: currentPage === page }">
      {{ page }}
    </button>

    <button
      @click="changePage(currentPage + 1)"
      :disabled="currentPage === totalPages">
      下一页
    </button>
  </div>
</template>

<script>
export default {
  props: {
    currentPage: Number,
    total: Number,
    perPage: Number
  },
  computed: {
    totalPages() {
      return Math.ceil(this.total / this.perPage)
    },
    pages() {
      const range = []
      const start = Math.max(1, this.currentPage - 2)
      const end = Math.min(this.totalPages, this.currentPage + 2)

      for (let i = start; i <= end; i++) {
        range.push(i)
      }
      return range
    }
  },
  methods: {
    changePage(page) {
      if (page >= 1 && page <= this.totalPages) {
        this.$emit('page-changed', page)
      }
    }
  }
}
</script>

分页性能优化

对于大数据量分页，可以考虑以下优化策略：

实现前端缓存，避免重复请求相同页面的数据

// 在data中增加缓存对象
data() {
  return {
    pageCache: {}
  }
}

// 修改fetchData方法
fetchData() {
  const cacheKey = `${this.currentPage}-${this.pageSize}-${this.searchQuery}`
  if (this.pageCache[cacheKey]) {
    this.tableData = this.pageCache[cacheKey].list
    this.total = this.pageCache[cacheKey].total
    return
  }

  // 正常请求API
  api.getList(params).then(res => {
    this.tableData = res.data.list
    this.total = res.data.total
    this.pageCache[cacheKey] = {
      list: res.data.list,
      total: res.data.total
    }
  })
}

使用防抖处理频繁的分页请求

import { debounce } from 'lodash'

methods: {
  fetchData: debounce(function() {
    // 实际获取数据的逻辑
  }, 300)
}

以上方法提供了不同场景下Vue实现查询分页的解决方案，可根据具体项目需求选择适合的方式。