vue el-table el-pagination前端实现分页 vant分页

最新推荐文章于 2025-05-24 14:43:04 发布

原创最新推荐文章于 2025-05-24 14:43:04 发布 · 1.1k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js

本文介绍了如何在Vue.js项目中利用el-table和el-pagination组件实现前端分页。通过将所有查询数据绑定到data，并使用slice方法处理每页显示的数据。同时，详细讲解了el-pagination组件的配置和使用方法，结合methods中的处理逻辑，成功地在 vant 框架下实现了前端分页功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

el-table
data绑定查询出来的全部数据，使用slice进行每页的数据处理

<el-table :data="emergencyExpertList.slice((currentPage-1)*pageSize,currentPage*pageSize)"
      :header-row-class-name="tableRowClassName"
       :row-class-name="tableRowClassColor" highlight-current-row border style="width:100%"
       @select="selectionChange" @select-all="selectAllChange">
        <el-table-column type="selection" width="48"> </el-table-column>
        <el-table-column prop="id" width="50" label="序号"> </el-table-column>
        <el-table-column prop="name" width="100" label="姓名">
          <template slot-scope="scope">
            <el-link style="color: blue;"
                   @click="openExpertInfo(scope.row.id)">{{scope.row.name}}</el-link>
          </template>
        </el-table-column>
        <el-table-column prop="age" width="50" label="年龄"> </el-table-column>
        <el-table-column prop="mobileNumber" label="手机号"> </el-table-column>
      </el-table>

el-pagination 具体使用可见element ui 官网

<el-pagination
        background
        layout="total, sizes, prev, pager, next, jumper"
        :total="dataCount"
        style="text-align:right"
        :page-sizes="[10, 15, 20, 25]"
        :page-size="pageSize"
        :current-page="currentPage"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange">
      </el-pagination>

methods

getExperts() {
      axios.get('/expert/getAll').then((res) => {
        const emergencyExpert = res.data;
        this.emergencyExpertList = emergencyExpert;
        this.dataCount = emergencyExpert.length;//获取总条数
      });
    },
handleSizeChange(val) {
      this.pageSize = val;
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      console.log(`当前页: ${val}`);
    },

这样就可以实现了

vant

<van-grid clickable :border="false" :column-num="3">
    <van-grid-item
      v-for="(info,index) in listInfo.slice(
        (currentPage - 1) * pageSize,
        currentPage * pageSize
      )"
      :key="info"
      class="gridItem"
      @click="detail(index)"
    >
      <van-image :src="info.url" />
      <span class="spanClass">{{ info.name }}</span>
    </van-grid-item>
  </van-grid>
  <van-pagination
    v-model="currentPage"
    :total-items="listInfo.length"
    :items-per-page="pageSize"
  />