前端分页神器（不在后端分页，纯前端分页）

最新推荐文章于 2023-06-30 14:53:43 发布

温馨提示  

最新推荐文章于 2023-06-30 14:53:43 发布

阅读量210

点赞数

分类专栏： vue 文章标签：前端 javascript vue.js

本文链接：https://blog.csdn.net/weixin_50603553/article/details/126305644

版权

vue 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

分页插件

    <div class="block">
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[20, 50, 100]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="totalSize">
        </el-pagination>
    </div>

定义变量

  pageSize: 20,
  totalSize: 0,
  currentPage: 1,

定义方法

            //分页数量显示
            handleSizeChange: function handleSizeChange(val) {
                this.pageSize = val;
            },
            //上下翻页
            handleCurrentChange: function handleCurrentChange(val) {
                this.currentPage = val;
            },
            //搜索按键
            searchPageList() {
                this.currentPage = 1
                //获取分页数据
                this.pageList()
            },

el-table表头列表渲染

				<el-table
                    :data="list.slice((currentPage-1)*pageSize,currentPage*pageSize)"
                    :border="true"
                    stripe tooltip-effect="light"
                    v-loading="loading" element-loading-text="数据加载中..." element-loading-spinner="el-icon-loading"
                    highlight-current-row="true" element-loading-background="rgba(255, 255, 255, 0.6)"
                    :height="tableHeight" ref="table" :row-style="{height:31+'px'}" :cell-style="{padding:3+'px'}">
                    <el-table-column type="index"   label="序号" width="50" align="center" fixed></el-table-column>
                    </el-table>