优化云药房的筛选

src/views/goods/order-detail.vue

@@ -43,7 +43,14 @@
                 <span>￥{{ scope.row.amount | toFixed2 }}</span>
               </template>
             </el-table-column>
-          <el-table-column prop="status" label="状态" min-width="100" align="center">
+          <el-table-column
+            prop="status"
+            label="状态"
+            min-width="100"
+            align="center"
+            :filters="getFilterStatusArr('status','showStatusStr')"
+            :filter-method="filterStatusHandler"
+          >
             <template slot-scope="scope">
               <span>{{orderDetailData.showStatusStr}}</span>
             </template>
@@ -58,9 +65,16 @@
               <span>{{scope.row.expressNo || '--'}}</span>
             </template>
           </el-table-column>
-          <el-table-column prop="belongPackage" label="所属包裹" min-width="100" align="center">
+          <el-table-column
+            prop="belongPackage"
+            label="所属包裹"
+            min-width="100"
+            align="center"
+            :filters="getFilterPackageArr('belongPackage')"
+            :filter-method="filterPackageHandler"
+          >
             <template slot-scope="scope">
-              <span>{{scope.row.belongPackage || '所属包裹'}}</span>
+              <span>{{scope.row.belongPackage || '--'}}</span>
             </template>
           </el-table-column>
           <el-table-column prop="refundDesc" label="退款说明" min-width="100" align="center">
@@ -498,6 +512,46 @@
               }
             }
           });
+      },
+       getFilterStatusArr(value,valueStr) {
+      let newFilterArr = [];
+      for (const newItem of this.tableData) {
+        for (const item  of newFilterArr) {
+         if(item.text == this.orderDetailData[valueStr]) {
+            return newFilterArr;
+         }
+        }
+        if (newItem[value]) {
+          newFilterArr.push({
+            text: this.orderDetailData[valueStr],
+            value: newItem[value]
+          })
+        }
+      }
+      return newFilterArr;
+    },
+    filterStatusHandler(value, row, column) {
+      return row.status === value;
+    },
+    getFilterPackageArr(value) {
+      let newFilterArr = [];
+      for (const newItem of this.tableData) {
+        for (const item  of newFilterArr) {
+         if(item.text == newItem[value]) {
+            return newFilterArr;
+         }
+        }
+        if (newItem[value]) {
+          newFilterArr.push({
+            text: newItem[value],
+            value: newItem[value]
+          })
+        }
+      }
+      return newFilterArr;
+    },
+    filterPackageHandler(value, row, column) {
+      return row.belongPackage === value;
     },
     },
     filters: {
@@ -521,7 +575,13 @@
   }
 </script>
 <style lang="scss">
+
   .order-detail-wrapper{
+    .el-table__column-filter-trigger i {
+      color: #0d9078;
+      font-size: 14px;
+      transform: scale(1);
+    }
     .hidden-input {
       height: 0;
     }