From 07e36bf80ac18379cb5e8fd725a04b75278241d4 Mon Sep 17 00:00:00 2001
From: BernardZheng <1329146797@qq.com>
Date: Tue, 9 Jul 2024 09:09:55 +0800
Subject: [PATCH] fix: filterMethod

---
 packages/cascader/src/cascader.vue | 295 ++++++++++++++++-------------
 1 file changed, 165 insertions(+), 130 deletions(-)

diff --git a/packages/cascader/src/cascader.vue b/packages/cascader/src/cascader.vue
index 6b0ca0645..718af939a 100644
--- a/packages/cascader/src/cascader.vue
+++ b/packages/cascader/src/cascader.vue
@@ -4,14 +4,14 @@
     :class="[
       'el-cascader',
       realSize && `el-cascader--${realSize}`,
-      { 'is-disabled': isDisabled }
+      { 'is-disabled': isDisabled },
     ]"
     v-clickoutside="() => toggleDropDownVisible(false)"
     @mouseenter="inputHover = true"
     @mouseleave="inputHover = false"
     @click="() => toggleDropDownVisible(readonly ? undefined : true)"
-    @keydown="handleKeyDown">
-
+    @keydown="handleKeyDown"
+  >
     <el-input
       ref="input"
       v-model="multiple ? presentText : inputValue"
@@ -23,22 +23,25 @@
       :class="{ 'is-focus': dropDownVisible }"
       @focus="handleFocus"
       @blur="handleBlur"
-      @input="handleInput">
+      @input="handleInput"
+    >
       <template slot="suffix">
         <i
           v-if="clearBtnVisible"
           key="clear"
           class="el-input__icon el-icon-circle-close"
-          @click.stop="handleClear"></i>
+          @click.stop="handleClear"
+        ></i>
         <i
           v-else
           key="arrow-down"
           :class="[
             'el-input__icon',
             'el-icon-arrow-down',
-            dropDownVisible && 'is-reverse'
+            dropDownVisible && 'is-reverse',
           ]"
-          @click.stop="toggleDropDownVisible()"></i>
+          @click.stop="toggleDropDownVisible()"
+        ></i>
       </template>
     </el-input>
 
@@ -51,7 +54,8 @@
         :hit="tag.hitState"
         :closable="tag.closable"
         disable-transitions
-        @close="deleteTag(tag)">
+        @close="deleteTag(tag)"
+      >
         <span>{{ tag.text }}</span>
       </el-tag>
       <input
@@ -60,16 +64,18 @@
         type="text"
         class="el-cascader__search-input"
         :placeholder="presentTags.length ? '' : placeholder"
-        @input="e => handleInput(inputValue, e)"
+        @input="(e) => handleInput(inputValue, e)"
         @click.stop="toggleDropDownVisible(true)"
-        @keydown.delete="handleDelete">
+        @keydown.delete="handleDelete"
+      />
     </div>
 
     <transition name="el-zoom-in-top" @after-leave="handleDropdownLeave">
       <div
         v-show="dropDownVisible"
         ref="popper"
-        :class="['el-popper', 'el-cascader__dropdown', popperClass]">
+        :class="['el-popper', 'el-cascader__dropdown', popperClass]"
+      >
         <el-cascader-panel
           ref="panel"
           v-show="!filtering"
@@ -79,7 +85,8 @@
           :border="false"
           :render-label="$scopedSlots.default"
           @expand-change="handleExpandChange"
-          @close="toggleDropDownVisible(false)"></el-cascader-panel>
+          @close="toggleDropDownVisible(false)"
+        ></el-cascader-panel>
         <el-scrollbar
           ref="suggestionPanel"
           v-if="filterable"
@@ -87,23 +94,27 @@
           tag="ul"
           class="el-cascader__suggestion-panel"
           view-class="el-cascader__suggestion-list"
-          @keydown.native="handleSuggestionKeyDown">
+          @keydown.native="handleSuggestionKeyDown"
+        >
           <template v-if="suggestions.length">
             <li
               v-for="(item, index) in suggestions"
               :key="item.uid"
               :class="[
                 'el-cascader__suggestion-item',
-                item.checked && 'is-checked'
+                item.checked && 'is-checked',
               ]"
               :tabindex="-1"
-              @click="handleSuggestionClick(index)">
+              @click="handleSuggestionClick(index)"
+            >
               <span>{{ item.text }}</span>
               <i v-if="item.checked" class="el-icon-check"></i>
             </li>
           </template>
           <slot v-else name="empty">
-            <li class="el-cascader__empty-text">{{ t('el.cascader.noMatch') }}</li>
+            <li class="el-cascader__empty-text">
+              {{ t("el.cascader.noMatch") }}
+            </li>
           </slot>
         </el-scrollbar>
       </div>
@@ -112,69 +123,72 @@
 </template>
 
 <script>
-import Popper from 'element-ui/src/utils/vue-popper';
-import Clickoutside from 'element-ui/src/utils/clickoutside';
-import Emitter from 'element-ui/src/mixins/emitter';
-import Locale from 'element-ui/src/mixins/locale';
-import Migrating from 'element-ui/src/mixins/migrating';
-import ElInput from 'element-ui/packages/input';
-import ElTag from 'element-ui/packages/tag';
-import ElScrollbar from 'element-ui/packages/scrollbar';
-import ElCascaderPanel from 'element-ui/packages/cascader-panel';
-import AriaUtils from 'element-ui/src/utils/aria-utils';
-import { t } from 'element-ui/src/locale';
-import { isEqual, isEmpty, kebabCase } from 'element-ui/src/utils/util';
-import { isUndefined, isFunction } from 'element-ui/src/utils/types';
-import { isDef } from 'element-ui/src/utils/shared';
-import { addResizeListener, removeResizeListener } from 'element-ui/src/utils/resize-event';
-import debounce from 'throttle-debounce/debounce';
+import Popper from "element-ui/src/utils/vue-popper";
+import Clickoutside from "element-ui/src/utils/clickoutside";
+import Emitter from "element-ui/src/mixins/emitter";
+import Locale from "element-ui/src/mixins/locale";
+import Migrating from "element-ui/src/mixins/migrating";
+import ElInput from "element-ui/packages/input";
+import ElTag from "element-ui/packages/tag";
+import ElScrollbar from "element-ui/packages/scrollbar";
+import ElCascaderPanel from "element-ui/packages/cascader-panel";
+import AriaUtils from "element-ui/src/utils/aria-utils";
+import { t } from "element-ui/src/locale";
+import { isEqual, isEmpty, kebabCase } from "element-ui/src/utils/util";
+import { isUndefined, isFunction } from "element-ui/src/utils/types";
+import { isDef } from "element-ui/src/utils/shared";
+import {
+  addResizeListener,
+  removeResizeListener,
+} from "element-ui/src/utils/resize-event";
+import debounce from "throttle-debounce/debounce";
 
 const { keys: KeyCode } = AriaUtils;
 const MigratingProps = {
   expandTrigger: {
-    newProp: 'expandTrigger',
-    type: String
+    newProp: "expandTrigger",
+    type: String,
   },
   changeOnSelect: {
-    newProp: 'checkStrictly',
-    type: Boolean
+    newProp: "checkStrictly",
+    type: Boolean,
   },
   hoverThreshold: {
-    newProp: 'hoverThreshold',
-    type: Number
-  }
+    newProp: "hoverThreshold",
+    type: Number,
+  },
 };
 
 const PopperMixin = {
   props: {
     placement: {
       type: String,
-      default: 'bottom-start'
+      default: "bottom-start",
     },
     appendToBody: Popper.props.appendToBody,
     visibleArrow: {
       type: Boolean,
-      default: true
+      default: true,
     },
     arrowOffset: Popper.props.arrowOffset,
     offset: Popper.props.offset,
     boundariesPadding: Popper.props.boundariesPadding,
     popperOptions: Popper.props.popperOptions,
-    transformOrigin: Popper.props.transformOrigin
+    transformOrigin: Popper.props.transformOrigin,
   },
   methods: Popper.methods,
   data: Popper.data,
-  beforeDestroy: Popper.beforeDestroy
+  beforeDestroy: Popper.beforeDestroy,
 };
 
 const InputSizeMap = {
   medium: 36,
   small: 32,
-  mini: 28
+  mini: 28,
 };
 
 export default {
-  name: 'ElCascader',
+  name: "ElCascader",
 
   directives: { Clickoutside },
 
@@ -182,18 +196,18 @@ export default {
 
   inject: {
     elForm: {
-      default: ''
+      default: "",
     },
     elFormItem: {
-      default: ''
-    }
+      default: "",
+    },
   },
 
   components: {
     ElInput,
     ElTag,
     ElScrollbar,
-    ElCascaderPanel
+    ElCascaderPanel,
   },
 
   props: {
@@ -203,7 +217,7 @@ export default {
     size: String,
     placeholder: {
       type: String,
-      default: () => t('el.cascader.placeholder')
+      default: () => t("el.cascader.placeholder"),
     },
     disabled: Boolean,
     clearable: Boolean,
@@ -211,22 +225,22 @@ export default {
     filterMethod: Function,
     separator: {
       type: String,
-      default: ' / '
+      default: " / ",
     },
     showAllLevels: {
       type: Boolean,
-      default: true
+      default: true,
     },
     collapseTags: Boolean,
     debounce: {
       type: Number,
-      default: 300
+      default: 300,
     },
     beforeFilter: {
       type: Function,
-      default: () => (() => {})
+      default: () => () => {},
     },
-    popperClass: String
+    popperClass: String,
   },
 
   data() {
@@ -242,7 +256,7 @@ export default {
       filtering: false,
       suggestions: [],
       inputInitialHeight: 0,
-      pressDeleteCount: 0
+      pressDeleteCount: 0,
     };
   },
 
@@ -252,9 +266,7 @@ export default {
       return this.size || _elFormItemSize || (this.$ELEMENT || {}).size;
     },
     tagSize() {
-      return ['small', 'mini'].indexOf(this.realSize) > -1
-        ? 'mini'
-        : 'small';
+      return ["small", "mini"].indexOf(this.realSize) > -1 ? "mini" : "small";
     },
     isDisabled() {
       return this.disabled || (this.elForm || {}).disabled;
@@ -263,18 +275,16 @@ export default {
       const config = this.props || {};
       const { $attrs } = this;
 
-      Object
-        .keys(MigratingProps)
-        .forEach(oldProp => {
-          const { newProp, type } = MigratingProps[oldProp];
-          let oldValue = $attrs[oldProp] || $attrs[kebabCase(oldProp)];
-          if (isDef(oldProp) && !isDef(config[newProp])) {
-            if (type === Boolean && oldValue === '') {
-              oldValue = true;
-            }
-            config[newProp] = oldValue;
+      Object.keys(MigratingProps).forEach((oldProp) => {
+        const { newProp, type } = MigratingProps[oldProp];
+        let oldValue = $attrs[oldProp] || $attrs[kebabCase(oldProp)];
+        if (isDef(oldProp) && !isDef(config[newProp])) {
+          if (type === Boolean && oldValue === "") {
+            oldValue = true;
           }
-        });
+          config[newProp] = oldValue;
+        }
+      });
 
       return config;
     },
@@ -288,17 +298,22 @@ export default {
       return !this.filterable || this.multiple;
     },
     clearBtnVisible() {
-      if (!this.clearable || this.isDisabled || this.filtering || !this.inputHover) {
+      if (
+        !this.clearable ||
+        this.isDisabled ||
+        this.filtering ||
+        !this.inputHover
+      ) {
         return false;
       }
 
       return this.multiple
-        ? !!this.checkedNodes.filter(node => !node.isDisabled).length
+        ? !!this.checkedNodes.filter((node) => !node.isDisabled).length
         : !!this.presentText;
     },
     panel() {
       return this.$refs.panel;
-    }
+    },
   },
 
   watch: {
@@ -322,27 +337,35 @@ export default {
           this.toggleDropDownVisible(false);
         }
 
-        this.$emit('input', val);
-        this.$emit('change', val);
-        this.dispatch('ElFormItem', 'el.form.change', [val]);
+        this.$emit("input", val);
+        this.$emit("change", val);
+        this.dispatch("ElFormItem", "el.form.change", [val]);
       }
     },
     options: {
-      handler: function() {
+      handler: function () {
         this.$nextTick(() => {
-          this.computePresentContent()
+          this.computePresentContent();
 
-          if(this.filtering) {
-            this.suggestions = this.panel.getFlattedNodes(this.leafOnly)
-            .filter(node => {
-              if (node.isDisabled) return false;
-              node.text = node.getText(this.showAllLevels, this.separator) || '';
-              return filterMethod(node, this.lastInputValue);
-            });
+          if (this.filtering) {
+            let { filterMethod } = this;
+
+            if (!isFunction(filterMethod)) {
+              filterMethod = (node, keyword) => node.text.includes(keyword);
+            }
+
+            this.suggestions = this.panel
+              .getFlattedNodes(this.leafOnly)
+              .filter((node) => {
+                if (node.isDisabled) return false;
+                node.text =
+                  node.getText(this.showAllLevels, this.separator) || "";
+                return filterMethod(node, this.lastInputValue);
+              });
           }
-      });
+        });
       },
-      deep: true
+      deep: true,
     },
     presentText(val) {
       this.inputValue = val;
@@ -356,16 +379,17 @@ export default {
       this.$nextTick(this.updatePopper);
     },
     inputValue(newVal, oldVal) {
-      const oldValue = oldVal && oldVal !== ' ' ? oldVal : this.lastInputValue
-      const newValue = newVal && newVal !== ' ' ? newVal : false
-      this.lastInputValue = newValue || oldValue || ' '
-    }
+      const oldValue = oldVal && oldVal !== " " ? oldVal : this.lastInputValue;
+      const newValue = newVal && newVal !== " " ? newVal : false;
+      this.lastInputValue = newValue || oldValue || " ";
+    },
   },
 
   mounted() {
     const { input } = this.$refs;
     if (input && input.$el) {
-      this.inputInitialHeight = input.$el.offsetHeight || InputSizeMap[this.realSize] || 40;
+      this.inputInitialHeight =
+        input.$el.offsetHeight || InputSizeMap[this.realSize] || 40;
     }
 
     if (!this.isEmptyValue(this.value)) {
@@ -401,13 +425,17 @@ export default {
     getMigratingConfig() {
       return {
         props: {
-          'expand-trigger': 'expand-trigger is removed, use `props.expandTrigger` instead.',
-          'change-on-select': 'change-on-select is removed, use `props.checkStrictly` instead.',
-          'hover-threshold': 'hover-threshold is removed, use `props.hoverThreshold` instead'
+          "expand-trigger":
+            "expand-trigger is removed, use `props.expandTrigger` instead.",
+          "change-on-select":
+            "change-on-select is removed, use `props.checkStrictly` instead.",
+          "hover-threshold":
+            "hover-threshold is removed, use `props.hoverThreshold` instead",
         },
         events: {
-          'active-item-change': 'active-item-change is renamed to expand-change'
-        }
+          "active-item-change":
+            "active-item-change is renamed to expand-change",
+        },
       };
     },
     toggleDropDownVisible(visible) {
@@ -424,8 +452,8 @@ export default {
             this.panel.scrollIntoView();
           });
         }
-        input.$refs.input.setAttribute('aria-expanded', visible);
-        this.$emit('visible-change', visible);
+        input.$refs.input.setAttribute("aria-expanded", visible);
+        this.$emit("visible-change", visible);
       }
     },
     handleDropdownLeave() {
@@ -450,10 +478,10 @@ export default {
       }
     },
     handleFocus(e) {
-      this.$emit('focus', e);
+      this.$emit("focus", e);
     },
     handleBlur(e) {
-      this.$emit('blur', e);
+      this.$emit("blur", e);
     },
     handleInput(val, event) {
       !this.dropDownVisible && this.toggleDropDownVisible(true);
@@ -466,13 +494,13 @@ export default {
       }
     },
     handleClear() {
-      this.presentText = '';
+      this.presentText = "";
       this.panel.clearCheckedNodes();
     },
     handleExpandChange(value) {
       this.$nextTick(this.updatePopper.bind(this));
-      this.$emit('expand-change', value);
-      this.$emit('active-item-change', value); // Deprecated
+      this.$emit("expand-change", value);
+      this.$emit("active-item-change", value); // Deprecated
     },
     focusFirstNode() {
       this.$nextTick(() => {
@@ -481,10 +509,14 @@ export default {
         let firstNode = null;
 
         if (filtering && suggestionPanel) {
-          firstNode = suggestionPanel.$el.querySelector('.el-cascader__suggestion-item');
+          firstNode = suggestionPanel.$el.querySelector(
+            ".el-cascader__suggestion-item"
+          );
         } else {
-          const firstMenu = popper.querySelector('.el-cascader-menu');
-          firstNode = firstMenu.querySelector('.el-cascader-node[tabindex="-1"]');
+          const firstMenu = popper.querySelector(".el-cascader-menu");
+          firstNode = firstMenu.querySelector(
+            '.el-cascader-node[tabindex="-1"]'
+          );
         }
 
         if (firstNode) {
@@ -498,7 +530,7 @@ export default {
       this.$nextTick(() => {
         if (this.config.multiple) {
           this.computePresentTags();
-          this.presentText = this.presentTags.length ? ' ' : null;
+          this.presentText = this.presentTags.length ? " " : null;
         } else {
           this.computePresentText();
         }
@@ -524,16 +556,17 @@ export default {
       this.presentText = null;
     },
     computePresentTags() {
-      const { isDisabled, leafOnly, showAllLevels, separator, collapseTags } = this;
+      const { isDisabled, leafOnly, showAllLevels, separator, collapseTags } =
+        this;
       const checkedNodes = this.getCheckedNodes(leafOnly);
       const tags = [];
 
-      const genTag = node => ({
+      const genTag = (node) => ({
         node,
         key: node.uid,
         text: node.getText(showAllLevels, separator),
         hitState: false,
-        closable: !isDisabled && !node.isDisabled
+        closable: !isDisabled && !node.isDisabled,
       });
 
       if (checkedNodes.length) {
@@ -546,10 +579,10 @@ export default {
             tags.push({
               key: -1,
               text: `+ ${restCount}`,
-              closable: false
+              closable: false,
             });
           } else {
-            rest.forEach(node => tags.push(genTag(node)));
+            rest.forEach((node) => tags.push(genTag(node)));
           }
         }
       }
@@ -564,19 +597,20 @@ export default {
         filterMethod = (node, keyword) => node.text.includes(keyword);
       }
 
-      const suggestions = this.panel.getFlattedNodes(this.leafOnly)
-        .filter(node => {
+      const suggestions = this.panel
+        .getFlattedNodes(this.leafOnly)
+        .filter((node) => {
           if (node.isDisabled) return false;
-          node.text = node.getText(this.showAllLevels, this.separator) || '';
+          node.text = node.getText(this.showAllLevels, this.separator) || "";
           return filterMethod(node, this.inputValue);
         });
 
       if (this.multiple) {
-        this.presentTags.forEach(tag => {
+        this.presentTags.forEach((tag) => {
           tag.hitState = false;
         });
       } else {
-        suggestions.forEach(node => {
+        suggestions.forEach((node) => {
           node.checked = isEqual(this.checkedValue, node.getValueByOption());
         });
       }
@@ -637,30 +671,32 @@ export default {
     deleteTag(tag) {
       const { checkedValue } = this;
       const current = tag.node.getValueByOption();
-      const val = checkedValue.find(n => isEqual(n, current));
-      this.checkedValue = checkedValue.filter(n => !isEqual(n, current));
-      this.$emit('remove-tag', val);
+      const val = checkedValue.find((n) => isEqual(n, current));
+      this.checkedValue = checkedValue.filter((n) => !isEqual(n, current));
+      this.$emit("remove-tag", val);
     },
     updateStyle() {
       const { $el, inputInitialHeight } = this;
       if (this.$isServer || !$el) return;
 
       const { suggestionPanel } = this.$refs;
-      const inputInner = $el.querySelector('.el-input__inner');
+      const inputInner = $el.querySelector(".el-input__inner");
 
       if (!inputInner) return;
 
-      const tags = $el.querySelector('.el-cascader__tags');
+      const tags = $el.querySelector(".el-cascader__tags");
       let suggestionPanelEl = null;
 
       if (suggestionPanel && (suggestionPanelEl = suggestionPanel.$el)) {
-        const suggestionList = suggestionPanelEl.querySelector('.el-cascader__suggestion-list');
-        suggestionList.style.minWidth = inputInner.offsetWidth + 'px';
+        const suggestionList = suggestionPanelEl.querySelector(
+          ".el-cascader__suggestion-list"
+        );
+        suggestionList.style.minWidth = inputInner.offsetWidth + "px";
       }
 
       if (tags) {
         const offsetHeight = Math.round(tags.getBoundingClientRect().height);
-        const height = Math.max(offsetHeight + 6, inputInitialHeight) + 'px';
+        const height = Math.max(offsetHeight + 6, inputInitialHeight) + "px";
         inputInner.style.height = height;
         if (this.dropDownVisible) {
           this.updatePopper();
@@ -670,11 +706,10 @@ export default {
 
     /**
      * public methods
-    */
+     */
     getCheckedNodes(leafOnly) {
       return this.panel.getCheckedNodes(leafOnly);
-    }
-  }
+    },
+  },
 };
 </script>
-