vue+element表格实现后台分页

最新推荐文章于 2025-03-06 10:14:23 发布

3unshine

最新推荐文章于 2025-03-06 10:14:23 发布

阅读量1.3k

点赞数 1

分类专栏： Vue

本文链接：https://blog.youkuaiyun.com/weixin_44119790/article/details/103727640

版权

Vue 专栏收录该内容

6 篇文章

订阅专栏

本文详细介绍了如何使用ElementUI的分页组件在前端实现数据分页展示，包括数据切片、表格列配置及分页操作的具体实现，探讨了前端筛选对分页效果的影响。

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

element ui 的分页很强，虽然我也只用过这么一个ui
最近睡眠质量真不行，行吧，进入正题
首先我后台的接口已经获取到了我所需要的列表（里面包含我需要的所有数据）

<el-table
      ref="filterTable"
      :data="detail.slice((currentPage-1)*pagesize,currentPage*pagesize)"
      style="width: 100%"
      @filter-change="handleFilterChange">
      <el-table-column
        prop="publishDate"
        label="日期"
        sortable
        width="180">
      </el-table-column>
      <el-table-column
        prop="title"
        label="标题"
        width="180">
      </el-table-column>
      <el-table-column
        prop="author"
        label="作者"
        width="180">
      </el-table-column>
      <el-table-column
        prop="review"
        label="审核人"
        width="180">
      </el-table-column>
      <el-table-column
        prop="sid"
        label="标签"
        width="100"
        :filters="[{ text: '理论学习', value: 1 }, { text: '规章制度', value: 2 },{ text: '党建工作', value: 3 }]"
        column-key="sortName"
        filter-placement="bottom-end">
        <template slot-scope="scope">

          <el-tag v-if="scope.row.sid === 1">理论学习</el-tag>
          <el-tag v-if="scope.row.sid === 2">规章制度</el-tag>
          <el-tag v-if="scope.row.sid === 3">党建工作</el-tag>
        </template>
      </el-table-column>
      <!--      操作-->
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="editNews(scope.$index, scope.row)">编辑
          </el-button>
          <el-button
            size="mini"
            type="danger"
            @click="deleteNews(scope.$index, scope.row)">删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

注意这个地方 :data="detail.slice((currentPage-1)pagesize,currentPagepagesize)"这个将当前的数据片段用slice方法给锁定然后交给:data 去渲染出来
然后是分页的处理

<div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[5, 10, 20, 40]"
        :page-size="pagesize"
        layout="total,sizes,prev, pager, next,jumper"
        :total="detail.length">
      </el-pagination>
    </div>

然后js定义一些变量

data() {
      return {
        responseResult: [],
        currentPage: 1,//初始页
        pagesize: 10,//每页的数据
        detail: []
      }
    },

分页需要的方法

//分页用到的一些方法
      handleSizeChange: function (size) {
        this.pagesize = size;
        // console.log(this.pagesize)//每页下拉显示数据
      },
      handleCurrentChange: function (currentPage) {
        this.currentPage = currentPage;
        // console.log(this.currentPage)  //点击第几页
      }