<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;
            },

圖片如下

資料有點少哈，不過好使，記錄筆記