vue element ui el-pagination表格分页

<el-table :data="userlilist.slice((currentPage-1)*pagesize,currentPage*pagesize)" highlight-current-row  style="width: 100%;">
            <el-table-column prop="" label="工作流标题" min-width="45%">
                <template scope="scope">
                    <span>销售渠道客户：</span>{{scope.row.work_name}}<br />
                    <span>部门管理审核：</span>{{scope.row.examine_news}}
                </template>
            </el-table-column>
            <el-table-column prop="status" label="状态" min-width="15%">
                <template scope="scope">
                    <span v-if="scope.row.status==0">未送审</span>
                    <span v-if="scope.row.status==1">审核中</span>
                    <span v-if="scope.row.status==2">退回</span>
                    <span v-if="scope.row.status==3">归档</span>
                </template>
            </el-table-column>
            <el-table-column prop="create_time" label="提交时间" min-width="35%">
            </el-table-column>
            <el-table-column prop="finish_time" label="完结时间" min-width="35%">
            </el-table-column>
            <el-table-column label="工作流进度" min-width="35%">
                <template scope="scope">
                    <el-progress :percentage="scope.row.spend"></el-progress>
                </template>
            </el-table-column>
            <el-table-column prop="work_name" label="工作流程类型" min-width="35%">
                <template scope="scope">
                    <el-button type="primary">{{scope.row.work_name}}</el-button>
                </template>
            </el-table-column>
            <el-table-column  label="操作">
              <template scope="scope">
                  <router-link :to="{path:'',query:{user_id:scope.row.id}}">
                    <el-button type="primary" style="padding: 6px 14px;">查看</el-button>
                  </router-link>
                
                <router-link :to="{path:'',query:{user_id:scope.row.id}}">
                    <el-button v-if="scope.row.ex_status==1" type="primary" style="padding: 6px 14px;">催促</el-button>
                </router-link>
                <router-link :to="{path:'',query:{user_id:scope.row.id}}">
                    <el-button v-if="scope.row.ex_status==2" type="primary" style="padding: 6px 14px;">审核</el-button>
                </router-link>
                <router-link :to="{path:'',query:{user_id:scope.row.id}}">
                    <el-button v-if="scope.row.ex_status==3" type="primary" style="padding: 6px 14px;">送审</el-button>
                </router-link>
              </template>
            </el-table-column>
        </el-table>
        <el-pagination
            background
            layout="prev, pager, next"
            :total="total"
            @current-change="current_change">
        </el-pagination>

交互部分

data() {
            return {
                loading: false,
                userlilist: [],
                user_id:'',
                total: 0,//总条数
                pagesize:10,//指定展示多少条
                currentPage:1//当前页码
            }
        },

 

//工作流列表
            getUserlilist: function () {
                let para =  {};
                this.loading = true;
                registerList(para).then((res) => {
                    var data=res.data.data
                    this.userlilist=data.list
                    this.total= data.total;
                });
            },
            // 分页
            current_change:function(currentPage){
                this.currentPage = currentPage;
            },

图片如下

 

 数据有点少哈，不过好使，记录笔记