vue实现每页显示条数

实现每页显示条数的基本方法

在Vue中实现分页功能通常需要结合后端API和前端组件。以下是一个基于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: {
    handleSizeChange(val) {
      this.pageSize = val
      this.fetchData()
    },
    handleCurrentChange(val) {
      this.currentPage = val
      this.fetchData()
    },
    fetchData() {
      // 调用API获取数据，传递pageSize和currentPage参数
      api.getList({
        page: this.currentPage,
        size: this.pageSize
      }).then(res => {
        this.tableData = res.data.list
        this.total = res.data.total
      })
    }
  },
  created() {
    this.fetchData()
  }
}
</script>

自定义分页组件实现

如果不使用UI框架，可以手动实现分页控件：

<template>
  <div>
    <select v-model="pageSize" @change="onPageSizeChange">
      <option value="5">5条/页</option>
      <option value="10">10条/页</option>
      <option value="20">20条/页</option>
      <option value="50">50条/页</option>
    </select>

    <table>
      <!-- 表格内容 -->
    </table>

    <div class="pagination">
      <button 
        v-for="page in totalPages" 
        :key="page"
        @click="goToPage(page)"
        :class="{ active: currentPage === page }">
        {{ page }}
      </button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentPage: 1,
      pageSize: 10,
      totalItems: 100,
      items: []
    }
  },
  computed: {
    totalPages() {
      return Math.ceil(this.totalItems / this.pageSize)
    }
  },
  methods: {
    onPageSizeChange() {
      this.currentPage = 1
      this.fetchData()
    },
    goToPage(page) {
      this.currentPage = page
      this.fetchData()
    },
    fetchData() {
      const start = (this.currentPage - 1) * this.pageSize
      const end = start + this.pageSize
      // 这里应该是API调用，示例使用模拟数据
      this.items = mockData.slice(start, end)
    }
  }
}
</script>

与Vuex结合的分页实现

在大型应用中，分页状态可能需要在多个组件间共享：

// store/modules/table.js
const state = {
  pagination: {
    currentPage: 1,
    pageSize: 10,
    total: 0
  }
}

const mutations = {
  SET_PAGINATION(state, payload) {
    state.pagination = { ...state.pagination, ...payload }
  }
}

const actions = {
  fetchData({ state, commit }) {
    const { currentPage, pageSize } = state.pagination
    return api.getList({
      page: currentPage,
      size: pageSize
    }).then(res => {
      commit('SET_DATA', res.data.list)
      commit('SET_PAGINATION', { total: res.data.total })
    })
  },
  changePageSize({ commit, dispatch }, size) {
    commit('SET_PAGINATION', { pageSize: size, currentPage: 1 })
    dispatch('fetchData')
  }
}

响应式分页实现

使用Vue的响应式特性自动更新分页：

watch: {
  pageSize(newVal) {
    this.currentPage = 1
    this.fetchData()
  },
  currentPage() {
    this.fetchData()
  }
}

分页样式优化

为分页组件添加CSS样式增强用户体验：

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

.pagination button {
  margin: 0 5px;
  padding: 5px 10px;
  border: 1px solid #ddd;
  background: white;
  cursor: pointer;
}

.pagination button.active {
  background: #409eff;
  color: white;
  border-color: #409eff;
}

.page-size-selector {
  margin-bottom: 15px;
}

以上方法展示了在Vue中实现每页显示条数控制的不同方案，可以根据项目需求选择合适的实现方式。