体现账单添加筛选

pages/main/index/index.vue

@@ -1,5 +1,8 @@
 <template>
   <div id="withdraw">
+    <el-select @change="changeSelect" v-model="selectValue" placeholder="请选择">
+      <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
+    </el-select>
     <div class="table">
       <el-table
         v-if="tableData.length"
@@ -53,7 +56,7 @@ const tableHeaders = [
   "订单号",
   "支付方式",
   "状态"
-];
+]
 const tableProps = [
   "uid",
   "real_name",
@@ -66,11 +69,34 @@ const tableProps = [
   "order_no",
   "channel",
   "statusShow"
-];
+]
 
 export default {
   data() {
     return {
+      options: [
+        {
+          value: -1,
+          label: '全部'
+        },
+        {
+          value: 0,
+          label: '提交'
+        },
+        {
+          value: 1,
+          label: '成功'
+        },
+        {
+          value: 2,
+          label: '失败'
+        },
+        {
+          value: 3,
+          label: '进行中'
+        },
+      ],
+      selectValue: -1,
       // 数据总条目
       totalCount: 0,
       currentPage: 1,
@@ -83,24 +109,25 @@ export default {
     };
   },
   mounted() {
-    this.getTableData();
+    this.getTableData()
   },
   methods: {
+    changeSelect(status) {
+      this.getTableData()
+    },
     // 点击重试
     async clickRetry(id) {
-      const res = await this.$post("/api/admin/payment/redoDraw", { id });
-      console.log(res);
+      const res = await this.$post("/api/admin/payment/redoDraw", { id })
     },
     // 点击用户的 uid
     clickUID(uid) {
-      console.log("click uid: " + uid);
+      // console.log("click uid: " + uid)
     },
     // 根据状态显示图表样式
     tableRowClassName({ row, rowIndex }) {
-      // console.log({row, rowIndex})
-      let className = "";
-      if(row.status === "1") className = "success-row";
-      return className;
+      let className = ""
+      if(row.status === "1") className = "success-row"
+      return className
     },
     // 格式化列表数据
     formatTableData(data) {
@@ -112,15 +139,13 @@ export default {
       }));
     },
     // 获取列表数据
-    async getTableData(page = 1) {
+    async getTableData(page = this.currentPage) {
       this.tableData = []
-      const res = await this.$post("/api/admin/payment/listDraw", { page });
-      // console.log(res)
-      const data = res.data;
-      this.tableData = this.formatTableData(res.data.list);
-      // console.log(this.tableData)
-      this.totalCount = Number(data.total);
-      this.totalPage = data.totalPage;
+      const res = await this.$post("/api/admin/payment/listDraw", { page, status: this.selectValue })
+      const data = res.data
+      this.tableData = this.formatTableData(res.data.list)
+      this.totalCount = Number(data.total)
+      this.totalPage = data.totalPage
     }
   }
 };
@@ -128,6 +153,6 @@ export default {
 
 <style scoped>
 .table {
-  height: calc(100% - 40px);
+  height: calc(100% - 80px);
 }
 </style>