element+Pagination 分页

<template>

  <div style="margin:10px;">

        <el-card>

　　　　<el-table ref="multipleTable" :data="tableData" border style="100%;">

                　　<el-table-column type="index" label="序号" width="200px" align="center"> </el-table-column>

                　　<el-table-column prop="name" label="寄存人姓名" align="center"></el-table-column>

                　　<el-table-column prop="mobile" label="寄存人联系方式" align="center"></el-table-column>

               　　 <el-table-column prop="pieces" label="寄存件数" align="center"></el-table-column>

                　　<el-table-column prop="pay_count" label="支付金额" align="center"></el-table-column>

                　　<el-table-column prop="location_desp" label="寄存位置" align="center"></el-table-column>

                　　<el-table-column prop="mobile" label="状态" align="center" :formatter="formatter"></el-table-column>

                　　<el-table-column prop="picture" label="图片" align="center">　

 　　　　　　　　<template slot-scope="{row}">

　　　　　　　　　　　//点击图片放大下载第三方包：cnpm i v-viewer

                        　　　　<div v-if="row.picture" v-viewer>

                            　　　　<img v-for="item in row.picture.split(',')" :src="item" :key="item" style="80px;height:80px;margin-left:10px;" />

                        　　　　</div>

                    　　</template>

                　　</el-table-column>

                　　<el-table-column prop="disabled" label="是否可用" align="center">

                   　　 <template slot-scope="scope">

                        　　<span>{{scope.row.disabled == 0 ? '不可用' : '可用'}}</span>

                    　　</template>

                　　</el-table-column>

                　　<el-table-column prop="in_time" label="存入时间" align="center"></el-table-column>

                　　<el-table-column prop="pay_type" label="支付方式" align="center">

                    　　<template slot-scope="scope">

                        　　<span>{{scope.row.pay_type == 1 ? '支付宝' : (scope.row.pay_type == 2 ? '微信' : '现金')}}</span>

                    　　</template>

                　　</el-table-column>

                　　<el-table-column prop="pay_status" label="支付状态" align="center">

                    　　<template slot-scope="scope">

                        　　<span>{{scope.row.pay_status == 0 ? '未支付' : '已支付'}}</span>

                    　　</template>

               　　 </el-table-column>

                　　<el-table-column prop="invoice_status" label="发票状态" align="center">

                    　　<template slot-scope="scope">

                       　　 <span>{{scope.row.invoice_status == 0 ? '未开发票' : '已开发票'}}</span>

                    　　</template>

                　　</el-table-column>

                　　<el-table-column label="操作" align="center" >

                　　　　<template slot-scope="scope">

                    　　　　<el-button type="text" @click="changeStatus(scope.row)">开放设置</el-button>

                    　　　　<el-button type="text" @click="changeDisabled(scope.row)">可用设置</el-button>

                　　　　</template>

                　　</el-table-column>

            　　</el-table>

            　　<el-pagination class="page-container" :current-page="currentPage" :page-sizes="[10, 20, 30, 40, 50]"

               　　 background :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total"

               　　 @current-change="handleCurrentChange" @size-change="handleSizeChange" />

        </el-card>

  </div>

</template>

<script>

import { queryRecordList } from '@/api/deposit.js' //后台接口定义的方法

export default {

    data() {

        return {

            tableData:[],

            currentPage:1,

            pageSize:10,

            total:0

        }

    },

    created () {

        this.getRecordList();

    },

    methods: {

       

formatter(row){

            if(row.status == 1) {

                return '未存入'

            }else if(row.status == 2){

                return '已存入'

            }else if(row.status == 3){

                return '已提取'

            }else if(row.status == 4){

                return '已取消（工作人员取消）'

            }else if(row.status == 5){

                return '已取消（用户主动取消）'

            }

        },

        getRecordList() {

            let params = {

                pageIndex:this.currentPage,

                pageSize:this.pageSize

            }

           queryRecordList(params).then(res=>{

                this.tableData = res.data.records

                res.data.records.map(e => {

                    e.in_time = e.in_time ? e.in_time.split('.')[0].replace('T', ' ') : '';

                    return e

                });

           })

        },

        handleCurrentChange(val) {

            this.currentPage = val

            this.getPageList(val)

        },

        getPageList(val) {

            this.$nextTick(() => {

                this.getRecordList(val, this.tableData.size)

            })

        },

        handleSizeChange(val) {

            this.pageSize = val

            // 重新请求数据

            this.getRecordList(val)

        },

    },

};

</script>

<style>

img {

    border-style: none;

    300px;

}

</style>

<style scoped>

</style>