修改监控流程页面【为改完】

src/views/userCenter/processCenter/gencyProcess.vue

@@ -1,26 +1,30 @@
 <template>
   <div>
-    <el-table :data="tableData" style="width: 100%" border :header-cell-style="{
-      background: '#DFE6EC',
-      fontWeight: '700',
-      color: '#1F2D3D',
-    }">
-      <el-table-column prop="processId" label="流程编号"  align="center">
-      </el-table-column>
-      <el-table-column prop="processName" label="流程名称" align="left">
-      </el-table-column>
-      <el-table-column prop="processPerson" label="发起人"  align="center">
-      </el-table-column>
-      <el-table-column prop="createTime" label="创建时间" sortable align="center">
-      </el-table-column>
-      <el-table-column  label="操作" width="120" align="center">
-        <template slot-scope="scope">
-          <el-button @click.native.prevent="handle(scope.$index, tableData)" type="text" size="small">
-            办理
-          </el-button>
-        </template>
-      </el-table-column>
-    </el-table>
+    <div class="table">
+      <vxe-table  ref="xTable" :data="tableData" :empty-render="{name: 'NotData'}" align="center" border stripe v-table-min-height="'calc(100vh - 380px)'">
+        <vxe-column show-overflow show-header-overflow type="seq" title="序号" width="77">
+          <template #default="{ row, rowIndex }">
+            {{ rowIndex + (q.pageNo - 1) * q.pageSize + 1 }}
+          </template>
+        </vxe-column>
+        <vxe-column show-overflow show-header-overflow field="prcNum"
+                    title="流程编号"></vxe-column>
+        <vxe-column show-overflow show-header-overflow field="prcName" title="流程名称"></vxe-column>
+        <vxe-column show-overflow show-header-overflow field="labelOneName"
+                    title="发起人"></vxe-column>
+        <vxe-column show-overflow show-header-overflow field="name" title="创建时间"></vxe-column>
+        <vxe-column show-overflow show-header-overflow title="操作" width="200" fixed="right">
+          <template #default="{ row }">
+            <el-button @click.native.prevent="handle(scope.$index, tableData)" type="text" size="small">
+              办理
+            </el-button>
+          </template>
+        </vxe-column>
+      </vxe-table>
+      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="q.pageNo"
+                     :page-sizes="[5, 10, 20]" :page-size="q.pageSize" layout="total, sizes, prev, pager, next, jumper"
+                     :total="total" />
+    </div>
   </div>
 </template>
 
@@ -29,6 +33,11 @@ export default {
   name: "gencyProcess",
   data() {
     return {
+      q:{
+        pageNo:1,
+        pageSize:10
+      },
+      total: 0,
       tableData: [
         {
           processId: "2016-05-1",
@@ -75,6 +84,17 @@ export default {
       });
     },
   methods: {
+    // 单页数据量
+    handleSizeChange(val) {
+      this.q.pageSize = val;
+      this.q.pageNo = 1;
+      this.loadData();
+    },
+    // 第几页
+    handleCurrentChange(val) {
+      this.q.pageNo = val;
+      this.loadData();
+    },
     handle() {
       alert(111);
     },
@@ -90,4 +110,12 @@ export default {
    height: 0px !important;
 
 }
-</style>
+.table {
+  margin: 0 14px 0 13px;
+  ::v-deep .el-pagination {
+    margin-top: 13px;
+    padding-left: 20px;
+    padding-bottom: 10px;
+  }
+}
+</style>