ct-component-plus 2.2.11 → 2.2.13

package/README.md

@@ -1,4 +1,8 @@
-# v2.2.11版本更新内容：
+# v2.2.13版本更新内容：
+
+1. 分页下拉组件添加补充项配置
+
+# v2.2.12版本更新内容：
 
 1. 优化分页下拉组件搜索相关逻辑
 

package/package.json

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

package/packages/components/paging-select/src/index.js

@@ -7,6 +7,12 @@ export const selectProps = {
   ...searchComponentProps,
   modelValue: [String, Number, Array, Boolean],
   multiple: Boolean,
+  options: {
+    type: Array,
+    default() {
+      return [];
+    },
+  },
   filterable: Boolean,
   api: String,
   serviceMethod: String,

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>
@@ -113,8 +107,23 @@ const attrs = useAttrs();
 
 const ns = useNamespace("paging-select");
 const optionsByApi = ref([]);
+const extraOptions = computed(() => {
+  return props.options && Array.isArray(props.options) ? props.options : [];
+});
+
 const showOptions = computed(() => {
-  return optionsByApi.value;
+  const map = new Map();
+  (extraOptions.value || []).forEach((item) => {
+    if (!item || item.value === undefined || item.value === null) return;
+    map.set(item.value, item);
+  });
+  (optionsByApi.value || []).forEach((item) => {
+    if (!item || item.value === undefined || item.value === null) return;
+    if (!map.has(item.value)) {
+      map.set(item.value, item);
+    }
+  });
+  return Array.from(map.values());
 });
 const valueModel = computed({
   get() {
@@ -203,8 +212,8 @@ watch(
     selectRef.value.selectedLabel = newVal;
   },
 );
-watch(optionsByApi, () => {
-  const arr = optionsByApi.value || [];
+watch(showOptions, () => {
+  const arr = showOptions.value || [];
   if (arr.length) {
     filterOptions.value = arr;
     noFilterOptions.value = false;
@@ -235,6 +244,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 || {};
@@ -386,10 +400,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();
 }