ct-component-plus 2.2.10 → 2.2.12

package/README.md

@@ -1,4 +1,4 @@
-# v2.2.10版本更新内容：
+# v2.2.12版本更新内容：
 
 1. 优化分页下拉组件搜索相关逻辑
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "ct-component-plus",
   "private": false,
-  "version": "2.2.10",
+  "version": "2.2.12",
   "type": "module",
   "main": "packages/components/index.js",
   "files": [

package/packages/components/paging-select/src/paging-select.vue

@@ -7,7 +7,7 @@
     collapse-tags
     v-bind="rawAttr"
     :multiple="multiple"
-    :filterable="filterable"
+    :filterable="filterable && !multiple"
     :filter-method="filterMethod"
     :clear-icon="clearIcon"
     :suffix-icon="suffixIcon"
@@ -17,7 +17,7 @@
     @focus="showSearchPrefix"
     @blur="hideSearchPrefix"
     @click="focusSearchInput"
-    @visible-change="handleListSort"
+    @visible-change="handleVisibleChange"
   >
     <template #prefix>
       <div
@@ -63,25 +63,19 @@
             }}</span>
           </slot>
         </el-option>
+        <el-option
+          v-if="multiple && noFilterOptions"
+          :key="'__ct_paging_select_empty__'"
+          :label="''"
+          :value="'__ct_paging_select_empty__'"
+          disabled
+          style="display: none"
+        >
+        </el-option>
       </slot>
     </div>
     <Empty :text="emptyText" v-if="multiple && noFilterOptions" />
     <template #empty>
-      <div :class="[ns.e('top')]" v-if="multiple">
-        <div :class="[ns.e('filter')]">
-          <el-input v-model="keyword" ref="filterInput" @input="changeKeyword">
-            <template #prefix>
-              <ct-icon name="search_line"></ct-icon>
-            </template>
-          </el-input>
-        </div>
-        <div :class="[ns.e('select')]" v-if="!rawAttr.multipleLimit">
-          <span :class="[ns.e('select-title')]">
-            <span v-if="!keyword">已选{{ selectLength }}项</span>
-            <span v-else>检索结果</span>
-          </span>
-        </div>
-      </div>
       <slot name="empty">
         <Empty :text="emptyText" />
       </slot>
@@ -235,6 +229,11 @@ const handleListSort = (val) => {
     }
   }
 };
+const dropdownVisible = ref(false);
+const handleVisibleChange = (visible) => {
+  dropdownVisible.value = visible;
+  handleListSort(visible);
+};
 const watchServiceHandle = async (reset = false) => {
   // 通过api获取数据，会监听api以及serviceParams的改变（收集到的依赖改变）都会触发重新查询
   const cbs = props.cbs || {};
@@ -259,7 +258,7 @@ const watchServiceHandle = async (reset = false) => {
         .then((res) => {
           const mapObj = props.mapObj || {};
           const {
-            list = "list",
+            list,
             label = "label",
             value = "value",
             self,
@@ -386,10 +385,15 @@ useBuriedParams(props, emit, {
 });
 
 function filterMethod(val) {
-  if (props.multiple) {
-    return; //多选走原有搜索逻辑
-  }
-  keyword.value = val;
+  if (props.multiple) return; //多选走原有搜索逻辑
+  const next = typeof val === "string" ? val : "";
+  const nextTrim = next.trim();
+  if (!dropdownVisible.value && !nextTrim) return;
+  //单选开启 filterable 时， el-select 内部有一套“输入查询”的状态。
+  // 下拉收起（点击别处/blur）时，Element Plus 往往会把内部 query 清空，并触发一次 filter-method，
+  // 所以这里优化了下拉收起时的查询
+  if (nextTrim === keyword.value) return;
+  keyword.value = nextTrim;
   changeKeyword();
 }