ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

element table 表格组件增加前端分页

2022-01-19 17:00:53  阅读:130  来源: 互联网

标签:giftDetailCurrentPage giftDetailPageSize val element 条数 组件 table giftDetailList



            <el-table
                :data="giftDetailList.slice((giftDetailCurrentPage-1)*giftDetailPageSize,giftDetailCurrentPage*giftDetailPageSize)"
                height="700px" :header-cell-style="{backgroundColor:'#e6e6e6'}" border style="width: 100%">
                <el-table-column type="index" label="序号" width="50">
                </el-table-column>
                <el-table-column prop="name" label="名称">
                </el-table-column>
                <el-table-column label="操作" fixed="right" width="200">
                    <template slot-scope="scope">
                        <el-button style="color:blue;" @click="giftDetailShowVisibleTrue(scope.row)">编辑</el-button>
                        <el-button style="color:red;" @click="saveProductNewArrival(0,scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="block" style="margin-top:15px;">
                <el-pagination align='center' @size-change="gifthandleSizeChange"
                    @current-change="gifthandleCurrentChange" :current-page="giftDetailCurrentPage"
                    :page-sizes="[2,5,10,20]" :page-size="giftDetailPageSize"
                    layout="total, sizes, prev, pager, next, jumper" :total="giftDetailList.length">
                </el-pagination>
            </div>
     
           gifthandleSizeChange(val) {
                this.giftDetailCurrentPage = 1;
                this.giftDetailPageSize = val;
            },
            gifthandleCurrentChange(val) {
                this.giftDetailCurrentPage = val;
            },
            giftDetailList: [],
            giftDetailTitle: "",
            giftDetailCurrentPage: 1, // 当前页码
            giftDetailPageSize: 10, // 每页的数据条数
            giftDetailShowVisible: false,

关键代码:giftDetailList.slice((giftDetailCurrentPage-1)giftDetailPageSize,giftDetailCurrentPagegiftDetailPageSize)

标签:giftDetailCurrentPage,giftDetailPageSize,val,element,条数,组件,table,giftDetailList
来源: https://blog.csdn.net/hy3528/article/details/122584893

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有