对账管理表格

src/pages/subPages/reconciliation.vue

@@ -23,7 +23,7 @@
           <el-button style="margin-left:10px;" type="primary" @click="onSearch">查询</el-button>
           <el-button style="margin-left:10px;" type="danger" @click="onReset">重置</el-button>
       </div>
-      <el-form :model="recForm">
+      <!-- <el-form :model="recForm">
           <el-form-item label="订单总数：">
               {{recForm.count}}
           </el-form-item>
@@ -42,7 +42,15 @@
           <el-form-item label="总扣款金额：">
               {{recForm.mch_amounts}}
           </el-form-item>
-      </el-form>
+      </el-form> -->
+      <el-table :data="tableData" border style="width: 100%;font-size:13px;" v-loading="isLoading">
+        <el-table-column align="center" prop="count" label="订单总数" />
+        <el-table-column align="center" prop="successCount" label="成功订单数" />
+        <el-table-column align="center" prop="errorCount" label="失败订单数" />
+        <el-table-column align="center" prop="sendCount" label="充值中订单数"></el-table-column>
+        <el-table-column align="center" prop="refill_amounts" label="总充值金额"></el-table-column>
+        <el-table-column align="center" prop="mch_amounts" label="总扣款金额"></el-table-column>
+    </el-table>
     </el-card>
   </div>
 </template>
@@ -74,7 +82,9 @@ export default {
         // 扣款金额
         mch_amounts: 0,
       },
-      isDisabled: false
+      isDisabled: false,
+      tableData: [],
+      isLoading: false,
     }
   },
   created() {
@@ -104,6 +114,7 @@ export default {
     // 查询
     async onSearch() {
       try {
+        this.isLoading = true
         this.startTime = this.dataRange[0]/1000
         this.endTime = this.dataRange[1]/1000
         let param = new URLSearchParams()
@@ -114,9 +125,12 @@ export default {
         console.log('对账管理', res);
         if (res && res.code == 200) {
           this.recForm = res.datas
+          this.tableData.push(res.datas)
         }
+        this.isLoading =  false
       } catch (error) {
         console.log(error);
+        this.isLoading =  false
       }
     },
     // 重置
@@ -162,4 +176,31 @@ export default {
 /deep/.el-form-item__label {
     text-align: left;
 }
+/deep/.el-table td, 
+/deep/.el-table th {
+    padding: 7px 0;
+}
+/deep/.el-table .cell,
+/deep/.el-table--border td:first-child .cell,
+/deep/.el-table--border th:first-child .cell {
+    padding-left: 7px;
+}
+/deep/.el-table .cell {
+    padding-right: 7px;
+}
+</style>
+<style>
+.el-table td, .el-table th.is-leaf,.el-table--border, .el-table--group{
+  border-color: #ccc; 
+}
+.el-table--border::after, .el-table--group::after, .el-table::before{
+  background-color: #ccc;
+}
+.el-table td, .el-table th.is-leaf {
+  border-bottom: 1px solid #ccc;
+  border-right: 1px solid #ccc;
+}
+.el-table thead {
+  color: #606266;
+}
 </style>