幸运24-个人-自定义排序

src/views/luckGift/luckGiftData.vue

@@ -18,6 +18,7 @@
       <div class="inquire">
         <span>时间</span>
         <el-date-picker v-model="inquire.time"
+                        @change="handleDateChange"
                         type="date"
                         placeholder="请选择">
         </el-date-picker>
@@ -163,6 +164,7 @@
     <!-- 表格 -->
     <el-table v-loading="loading"
               :data="tableData"
+              @sort-change="handleSortChange"
               border
               style="width: 100%; margin-top: 25px">
       <el-table-column prop="date"
@@ -178,15 +180,19 @@
                        align="center"
                        label="充值等级" />
       <el-table-column prop="totalInput"
+                       :sortable="inquire.sortable"
                        align="center"
                        label="进入" />
       <el-table-column prop="totalOutput"
+                       :sortable="inquire.sortable"
                        align="center"
                        label="退出" />
       <el-table-column prop="production"
+                       :sortable="inquire.sortable"
                        align="center"
                        label="剩余" />
       <el-table-column prop="productionRatio"
+                       :sortable="inquire.sortable"
                        align="center"
                        label="退出/进入" />
       <el-table-column prop="avgInput"
@@ -281,6 +287,9 @@ export default {
         value: undefined,
         userRechargeLevel: undefined,
         poolType: undefined,
+        sortable: false,
+        sortCol: undefined,
+        sortOrder: undefined
       },
       userRechargeLevelList: [],
       poolTypes: [],
@@ -350,6 +359,8 @@ export default {
         partitionId: this.inquire.value,
         userRechargeLevel: this.inquire.userRechargeLevel,
         poolType: this.inquire.poolType ? this.inquire.poolType : undefined,
+        sortCol: this.inquire.sortCol,
+        sortOrder: this.inquire.sortOrder
       }).then((res) => {
         this.total = res.data.dataPage.total;
         this.tableData = res.data.dataPage.rows;
@@ -384,6 +395,28 @@ export default {
         }
       });
     },
+    handleDateChange (val) {
+      if (val && !this.inquire.sortable) {
+        this.inquire.sortable = 'custom';
+        this.inquire.sortCol = undefined;
+        this.inquire.sortOrder = undefined;
+      }
+      if (!val && this.inquire.sortable) {
+        this.inquire.sortable = false;
+        this.inquire.sortCol = undefined;
+        this.inquire.sortOrder = undefined;
+      }
+    },
+    handleSortChange (data) {
+      if (data.order) {
+        this.inquire.sortCol = data.prop;
+        this.inquire.sortOrder = data.order == "ascending" ? "asc" : "desc";
+      } else {
+        this.inquire.sortCol = undefined;
+        this.inquire.sortOrder = undefined
+      }
+      this.getData();
+    },
     // 分页导航
     handleSizeChange () {
       this.getData();