修复创建条目错位

kooriookami · Nov 22, 2024 · 4ba3b70 · 4ba3b70
1 parent b3a3ad7
commit 4ba3b70
Show file tree

Hide file tree

Showing 6 changed files with 65 additions and 47 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,9 +2,10 @@
 
 ### 1.4.0
 
-_2024-11-21_
+_2024-11-22_
 
 - 支持绑定对象值
+- 修复创建条目错位
 
 ### 1.3.0
 

diff --git a/docs/assets/index-D8de3ibR.css b/docs/assets/index-D8de3ibR.css
diff --git a/docs/assets/index-Ge4pEWT_.css b/docs/assets/index-Ge4pEWT_.css
diff --git a/docs/assets/index-f24LVGdv.js → docs/assets/index-vubecb3Y.js b/docs/assets/index-f24LVGdv.js → docs/assets/index-vubecb3Y.js
diff --git a/docs/index.html b/docs/index.html
@@ -5,8 +5,8 @@
     <link rel="icon" type="image/svg+xml" href="./vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Select V2 虚拟列表选择器</title>
-    <script type="module" crossorigin src="./assets/index-f24LVGdv.js"></script>
-    <link rel="stylesheet" crossorigin href="./assets/index-Ge4pEWT_.css">
+    <script type="module" crossorigin src="./assets/index-vubecb3Y.js"></script>
+    <link rel="stylesheet" crossorigin href="./assets/index-D8de3ibR.css">
   </head>
   <body>
     <div id="app"></div>

diff --git a/packages/el-select-v2/src/el-select-v2.vue b/packages/el-select-v2/src/el-select-v2.vue
@@ -9,15 +9,15 @@
     :disabled="disabled"
     :clearable="clearable"
     :filterable="filterable"
-    :allow-create="allowCreate"
+    :allow-create="false"
     :loading="loading"
     :popper-class="`el-select-v2__popper ${popperClass || ''}`"
     :remote="remote"
     :loading-text="loadingText"
     :no-match-text="noMatchText"
     :no-data-text="noDataText"
     :remote-method="remoteMethod"
-    :filter-method="filterMethod || localFilterMethod"
+    :filter-method="localFilterMethod"
     :multiple="multiple"
     :multiple-limit="multipleLimit"
     :placeholder="placeholder"
@@ -35,7 +35,7 @@
     <RecycleScroller
       v-if="localOptions.length"
       ref="scroller"
-      v-slot="{ item, index }"
+      v-slot="{ item }"
       class="scroller"
       :style="scrollerStyle"
       :items="localOptions"
@@ -46,7 +46,7 @@
       <li v-if="item._isGroup" class="el-select-group__title">{{ item[labelKey] }}</li>
       <el-option
         v-else
-        :key="index"
+        :key="getOptionKey(item)"
         :value="item[valueKey]"
         :label="item[labelKey]"
         :disabled="item.disabled"
@@ -150,13 +150,15 @@
         localValue: '',
         localOptions: [],
         dropdownWidth: '',
+        query: '',
       };
     },
     mounted() {
       this.updateSelectedLabel();
       if (this.$refs.select) {
         this.$watch(() => this.$refs.select.visible, value => {
           if (value) {
+            this.query = '';
             this.updateOptions();
           }
         });
@@ -189,14 +191,19 @@
         this.$refs.scroller.scrollToItem(index);
       },
       localFilterMethod(query) {
-        const groupNameList = this.flattedOptions.filter(option => !option._isGroup &&
-          option[this.labelKey]?.toLowerCase().includes(query.toLowerCase())).map(option => option._groupName);
-        this.localOptions = this.flattedOptions.filter(option => {
-          if (option._isGroup) {
-            return groupNameList.some(groupName => option._groupName === groupName);
-          }
-          return option[this.labelKey]?.toLowerCase().includes(query.toLowerCase());
-        });
+        this.query = query;
+        if (typeof this.filterMethod === 'function') {
+          this.filterMethod(query);
+        } else {
+          const groupNameList = this.flattedOptions.filter(option => !option._isGroup &&
+            option[this.labelKey]?.toLowerCase().includes(query.toLowerCase())).map(option => option._groupName);
+          this.localOptions = this.flattedOptions.filter(option => {
+            if (option._isGroup) {
+              return groupNameList.some(groupName => option._groupName === groupName);
+            }
+            return option[this.labelKey]?.toLowerCase().includes(query.toLowerCase());
+          });
+        }
       },
       updateOptions() {
         this.localOptions = this.flattedOptions;
@@ -230,6 +237,10 @@
         }
         return value1 === value2;
       },
+      getOptionKey(item) {
+        const value = item[this.valueKey];
+        return isPlainObject(value) ? value[this.objectKey] : value;
+      },
       focus() {
         this.$refs.select.focus();
       },
@@ -260,6 +271,12 @@
             list.push(option);
           }
         });
+        if (this.allowCreate && this.query && !list.some(option => option[this.labelKey] === this.query)) {
+          list.unshift({
+            [this.valueKey]: this.query,
+            [this.labelKey]: this.query,
+          });
+        }
         return list;
       },
       scrollerStyle() {