element-ui分页

                后端不写逻辑:加这个:data="accountList.slice((page-1)*pageSize,page*pageSize)"

                        accountList:是我的数据

  <el-table :data="accountList.slice((page-1)*pageSize,page*pageSize)" style="width: 100%" border stripe class="eltable">

                <el-table-column type="index" label="ID"></el-table-column>

                <el-table-column prop="name" label="名称" width="120px">

                </el-table-column>

                <el-table-column prop="phone" label="电话" width="120px">

                </el-table-column>

                <el-table-column prop="avatar" label="微信头像" width="80px">

                    <template v-slot="scope">

                        <img :src="scope.row.avatar" alt="" class="avaurl">

                    </template>

                </el-table-column>

                <el-table-column prop="nickname" label="微信名称" width="210px"></el-table-column>

                <el-table-column prop="number" label="身份证号" width="170px"></el-table-column>

                <el-table-column prop="picture1" label="正面照">

                    <template v-slot="scope">

                        <img :src="scope.row.avatar" alt="" class="avaurl">

                    </template>

                </el-table-column>

                <el-table-column prop="picture2" label="反面照">

                    <template v-slot="scope">

                        <!-- {{scope.row}} -->

                        <img :src="scope.row.avatar" alt="" class="avaurl">

                    </template>

                </el-table-column>

                <el-table-column prop="create_time" label="注册时间"></el-table-column>

            </el-table>

        <!-- 分页区域 -->

            <el-pagination class="fenye" @size-change="handleSizeChange" @current-change="handleCurrentChange"

                :current-page="page" :page-sizes="[1, 2, 5, 10]" :page-size="pageSize"

                layout="total, sizes, prev, pager, next, jumper" :total="total">

            </el-pagination>

@size-change=“handleSizeChange"的作用是每页获取有多少条数据是配合:page-size使用

@current-change="handleCurrentChange"的作用是获取现在是第几页的意思是配合:current-page="currentPage"一起使用

在js里的data数据里加上所需数据

  data() {

        return {

            accountList: [],

            total: 0,

            page: 1,

            pageSize: 10,

            list: [],

        };

    },

然后在js代码中写入逻辑

   created() {

        this.loadData();

    },

    methods: {

        loadData() {

            apis.getAllAccounts({

                page: this.page,

                pageSize: this.pageSize

            }).then((res) => {

                console.log(res.data);

                if (res.data.code === 0) {

                    this.accountList = res.data.data.list

                    this.total = res.data.data.total

                }

            });

        },

        handleSizeChange(val) {

            this.pageSize = val;

            this.loadData();

        },

        handleCurrentChange(val) {

            this.page = val;

            this.loadData();

        }

        记得传参数

    },

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值