修复vue3版本快捷查询日期无法清除的问题

Author: cq-panda

Vol.Vue3版本/src/components/basic/QuickSearch.vue

@@ -19,18 +19,26 @@
       >
       </el-option>
     </el-select>
-    <el-date-picker
-      style="width: 210px"
-      clearable
-      size="small"
-      unlink-panels
+    <div
+      class="date-range"
       v-else-if="['date', 'datetime'].indexOf(singleSearch.type) != -1"
-      v-model="searchFormFields[singleSearch.field]"
-      type="daterange"
-      :value-format="getDateFormat(singleSearch)"
-      :placeholder="singleSearch.title"
     >
-    </el-date-picker>
+      <el-date-picker
+        style="width: 210px"
+        :clearable="false"
+        size="small"
+        unlink-panels
+        v-model="searchFormFields[singleSearch.field]"
+        type="daterange"
+        :value-format="getDateFormat(singleSearch)"
+        :placeholder="singleSearch.title"
+      >
+      </el-date-picker>
+      <i
+        class="el-icon-circle-close"
+        @click="dateRangeClear(singleSearch.field)"
+      ></i>
+    </div>
     <el-cascader
       style="width: 210px"
       clearable
@@ -96,6 +104,9 @@ export default {
         this.compareDate(date, item.min) || !this.compareDate(date, item.max)
       );
     },
+    dateRangeClear(field) {
+      this.searchFormFields[field]=[undefined,undefined];
+    },
   },
   created() {
     this.singleSearch.dateType = this.singleSearch.type + "range";
@@ -120,4 +131,25 @@ export default {
     }
   },
 };
-</script>
+</script>
+<style lang="less" scoped>
+.date-range{
+  position: relative;
+  > i{
+    display: none;
+    height: 27px;
+    line-height: 27px;
+    right: 1px;
+    top: 3px;
+    font-size: 13px;
+    color: #b4adad;
+    position: absolute;
+    padding: 0 6px 0 3px;
+    background: #ffff;
+    cursor: pointer;
+  }
+}
+.date-range:hover > i{
+  display: inline-block;
+}
+</style>

开发版dev/Vue.NetCore/Vol.Vue3版本/src/components/basic/QuickSearch.vue

@@ -19,18 +19,26 @@
       >
       </el-option>
     </el-select>
-    <el-date-picker
-      style="width: 210px"
-      clearable
-      size="small"
-      unlink-panels
+    <div
+      class="date-range"
       v-else-if="['date', 'datetime'].indexOf(singleSearch.type) != -1"
-      v-model="searchFormFields[singleSearch.field]"
-      type="daterange"
-      :value-format="getDateFormat(singleSearch)"
-      :placeholder="singleSearch.title"
     >
-    </el-date-picker>
+      <el-date-picker
+        style="width: 210px"
+        :clearable="false"
+        size="small"
+        unlink-panels
+        v-model="searchFormFields[singleSearch.field]"
+        type="daterange"
+        :value-format="getDateFormat(singleSearch)"
+        :placeholder="singleSearch.title"
+      >
+      </el-date-picker>
+      <i
+        class="el-icon-circle-close"
+        @click="dateRangeClear(singleSearch.field)"
+      ></i>
+    </div>
     <el-cascader
       style="width: 210px"
       clearable
@@ -96,6 +104,9 @@ export default {
         this.compareDate(date, item.min) || !this.compareDate(date, item.max)
       );
     },
+    dateRangeClear(field) {
+      this.searchFormFields[field]=[undefined,undefined];
+    },
   },
   created() {
     this.singleSearch.dateType = this.singleSearch.type + "range";
@@ -120,4 +131,25 @@ export default {
     }
   },
 };
-</script>
+</script>
+<style lang="less" scoped>
+.date-range{
+  position: relative;
+  > i{
+    display: none;
+    height: 27px;
+    line-height: 27px;
+    right: 1px;
+    top: 3px;
+    font-size: 13px;
+    color: #b4adad;
+    position: absolute;
+    padding: 0 6px 0 3px;
+    background: #ffff;
+    cursor: pointer;
+  }
+}
+.date-range:hover > i{
+  display: inline-block;
+}
+</style>