分页和表格结合 el-pagination和el-table（1）带pagesize（2）不带pagesize

最新推荐文章于 2024-08-12 22:52:55 发布

原创最新推荐文章于 2024-08-12 22:52:55 发布 · 1.7k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#分页和表格相结合

vue 同时被 3 个专栏收录

42 篇文章

订阅专栏

elementui

4 篇文章

订阅专栏

el-table

2 篇文章

订阅专栏

本文详细介绍了如何使用Vue框架中的Element UI组件库实现动态表格展示与分页功能，包括数据绑定、条件渲染及响应式分页操作，适合前端开发者学习与参考。

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

（1）

<el-table :data="groupList" style="width: 100%">
    <el-table-column prop="name" label="分组名称"></el-table-column>
    <el-table-column prop="total" label="用户数"></el-table-column>
    <el-table-column prop="remark" label="备注">
        <template slot-scope="scope">
            <span v-if="scope.row.remark == ''||scope.row.remark == null">-</span>
            <span v-if="scope.row.remark !='' || scope.row.remark != null">                                
               {{scope.row.remark}}
            </span>
        </template>
     </el-table-column>
    <el-table-column prop="createTime" label="创建时间"></el-table-column>
</el-table>
         <!-- 分页 --> 
        <div class="page-wrapper" style="display:flex;">
            <span class="totalRow">共 {{totalRow}} 条</span>
            <div>
                <el-pagination background @size-change="handleSizeChange" 
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[10,20,30]"
                :page-size="pageSize"
                layout="sizes, prev, pager, next"
                :total="totalRow">
                </el-pagination>
            </div>
        </div>

 data(){
        return{ 
            groupList:[],
            // 分页
            totalRow:0,
            currentPage:1,
            pageSize:10,
        }
    },
mounted(){
        this.getVipList();
    },
methods:{
    getVipList(){
            const that = this;
            request
                .get('/API')
                .query({pageNum:that.currentPage})
                .query({pageSize:that.pageSize})
                .end(function(err,res){
                    if(err || !res.ok){
                        alert('oh on ! error')
                    }else{
                        // console.log(res)
                        that.totalRow = res.body.data.totalRow;
                        that.groupList = res.body.data.fieldList
                    }
                })
        },
    handleSizeChange(val){
            this.pageSize = val;
            // console.log(`每页 ${val} 条`);     
            this.getVipList();
    },
    handleCurrentChange(val){
        // console.log(`当前页: ${val}`);
        this.currentPage = val;
        this.getVipList();
   },

}

如果不需要pageSize的话，代码可以改成如下图所示就可以了。将源代码中的红色框中删掉，换成蓝色框中的部分。

想要更简单的分页和表格的结合如图