fix(select): fix issuse 128

issuse-128,分组搜索 fix Tencent#128
geff1991 · Jan 23, 2022 · d3acf9a · d3acf9a
1 parent c5ff9cc
commit d3acf9a
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 16 deletions.
diff --git a/examples/select/demos/group.vue b/examples/select/demos/group.vue
@@ -1,10 +1,10 @@
 <template>
   <div class="tdesign-demo-select-base">
     <!-- 方式一：直接传 options 数据，比插槽的方式更简单 -->
-    <t-select v-model="value1" :options="options" placeholder="请选择" />
+    <t-select v-model="value1" :options="options" placeholder="请选择" filterable />
 
     <!-- 方式二：使用插槽节点 -->
-    <t-select v-model="value2" placeholder="请选择">
+    <t-select v-model="value2" placeholder="请选择" filterable>
       <t-option-group
         v-for="(list, index) in options"
         :key="index"
@@ -28,10 +28,7 @@ export default {
       options: [
         {
           group: '分组一',
-          children: [
-            { label: '选项一', value: 1 },
-            { label: '选项二', value: 2 },
-          ],
+          children: [],
         },
         {
           group: '分组二',

diff --git a/src/select/optionGroup.tsx b/src/select/optionGroup.tsx
@@ -5,12 +5,14 @@ import { prefix } from '../config';
 import CLASSNAMES from '../utils/classnames';
 import props from './option-group-props';
 import { ClassName } from '../common';
+import { TdOptionProps } from './type';
 
 const name = `${prefix}-select-option-group`;
 
 export interface Select extends Vue {
   tSelect: {
     size: string;
+    displayOptions: Array<TdOptionProps>;
   };
 }
 
@@ -33,10 +35,27 @@ export default (Vue as VueConstructor<Select>).extend({
       ];
     },
   },
+  watch: {
+    'tSelect.displayOptions': function () {
+      this.childrenChange();
+    },
+  },
+  data() {
+    return {
+      visible: true,
+    };
+  },
+  methods: {
+    childrenChange() {
+      this.visible = this.$children
+        && Array.isArray(this.$children)
+        && this.$children.some((option) => (option as any).show === true);
+    },
+  },
   render(): VNode {
     const children: ScopedSlotReturnValue = renderTNodeJSX(this, 'default');
     return (
-      <li class={this.classes}>
+      <li v-show={this.visible} class={this.classes}>
         <div class={`${name}__header`}>{this.label}</div>
         <ul>{children}</ul>
       </li>

diff --git a/src/select/select.tsx b/src/select/select.tsx
@@ -320,10 +320,6 @@ export default mixins(getConfigReceiverMixins<Vue, SelectConfig>('select')).exte
     },
     visibleChange(val: boolean) {
       emitEvent<Parameters<TdSelectProps['onVisibleChange']>>(this, 'visible-change', val);
-      if (this.focusing && !val) {
-        this.visible = true;
-        return;
-      }
       this.visible = val;
       if (!val) {
         this.searchInput = '';
@@ -603,7 +599,7 @@ export default mixins(getConfigReceiverMixins<Vue, SelectConfig>('select')).exte
           {options.map((groupList: SelectOptionGroup) => {
             const children = groupList.children.filter((item) => this.displayOptionsMap.get(item));
             return (
-              <t-option-group label={groupList.group} divider={groupList.divider}>
+              <t-option-group v-show={children.length} label={groupList.group} divider={groupList.divider}>
                 {this.renderOptions(children)}
               </t-option-group>
             );

diff --git a/src/tree-select/tree-select.tsx b/src/tree-select/tree-select.tsx
@@ -228,10 +228,6 @@ export default mixins(getConfigReceiverMixins<Vue, TreeSelectConfig>('treeSelect
   },
   methods: {
     async popupVisibleChange(visible: boolean) {
-      if (this.focusing && !visible) {
-        this.visible = true;
-        return;
-      }
       await (this.visible = visible);
       if (this.showFilter && this.visible) {
         const searchInput = this.$refs.input as HTMLElement;