fix select issue after refactoring

examples/select/demos/noborder.vue

@@ -3,9 +3,10 @@
     <t-select
       v-model="value"
       :bordered="false"
-      style="width: 200px;"
+      style="width: 200px"
       placeholder="-请选择-"
       clearable
+      auto-width
       :options="options"
     />
   </div>

examples/select/demos/prefix.vue

@@ -1,16 +1,7 @@
 <template>
   <div>
-    <t-select
-      v-model="value"
-      style="width: 200px;"
-      :options="options"
-      clearable
-      placeholder="-请选择-"
-    >
-      <icon
-        name="browse"
-        slot="prefixIcon"
-      />
+    <t-select v-model="value" style="width: 200px" :options="options" clearable placeholder="-请选择-">
+      <icon name="browse" slot="prefixIcon" style="margin-right: 8px" />
     </t-select>
   </div>
 </template>

examples/select/demos/virtual-scroll.vue

@@ -1,6 +1,13 @@
 <template>
   <div class="tdesign-demo-select-base">
-    <t-select v-model="value" :options="options" placeholder="请选择" :scroll="{ type: 'virtual' }" />
+    <!-- 开启虚拟滚动请为select的panel设定好height 通过popupProps进行透传 -->
+    <t-select
+      v-model="value"
+      :options="options"
+      placeholder="请选择"
+      :scroll="{ type: 'virtual' }"
+      :popup-props="{ overlayStyle: { height: '300px' } }"
+    />
   </div>
 </template>
 
@@ -9,7 +16,7 @@ export default {
   data() {
     const options = [];
     for (let i = 0; i < 1000; i++) {
-      options.push({ label: `选项${i}`, value: String(i) });
+      options.push({ label: `选项${i + 1}`, value: String(i) });
     }
     return {
       value: '',

src/pagination/pagination.tsx

@@ -315,6 +315,7 @@ export default mixins(getConfigReceiverMixins<Vue, PaginationConfig>('pagination
             disabled={this.disabled}
             class={this.sizerClass}
             onChange={this.onSelectorChange}
+            autoWidth={true}
           >
             {this.sizeOptions.map((item, index) => (
               <t-option value={item.value} label={item.label} key={index} />
@@ -382,6 +383,7 @@ export default mixins(getConfigReceiverMixins<Vue, PaginationConfig>('pagination
             class={this.simpleClass}
             onChange={this.toPage}
             options={this.pageCountOption}
+            autoWidth={true}
           />
         ) : null}
         {/* 向后按钮 */}

src/select/optionGroup.tsx

@@ -1,5 +1,5 @@
 import {
-  computed, defineComponent, ref, toRefs, watch, onMounted, inject,
+  computed, defineComponent, ref, toRefs, inject,
 } from '@vue/composition-api';
 import Vue from 'vue';
 import { ScopedSlotReturnValue } from 'vue/types/vnode';
@@ -25,7 +25,6 @@ export default defineComponent({
   setup(props: TdOptionGroupProps) {
     const { divider } = toRefs(props);
     const ulRef = ref<HTMLElement>(null);
-    const visible = ref(true);
     const tSelect: any = inject('tSelect');
     const classes = computed<ClassName>(() => [
       name,
@@ -34,18 +33,7 @@ export default defineComponent({
         [`${name}__divider`]: divider,
       },
     ]);
-    const childrenChange = () => {
-      visible.value = [...(ulRef.value?.children || [])]?.some((liItem) => (liItem as any).__vue__.show === true);
-    };
-    onMounted(() => {
-      // 首次载入的时候也更新一次
-      childrenChange();
-    });
-    watch(tSelect.displayOptions, () => {
-      childrenChange();
-    });
     return {
-      visible,
       classes,
       ulRef,
     };
@@ -54,9 +42,11 @@ export default defineComponent({
     const renderTNode = useTNodeJSX();
     const children: ScopedSlotReturnValue = renderTNode('default');
     return (
-      <li v-show={this.visible} class={this.classes}>
+      <li class={this.classes}>
         <div class={`${name}__header`}>{this.label}</div>
-        <ul ref="ulRef">{children}</ul>
+        <ul class={`${prefix}-select__list`} ref="ulRef">
+          {children}
+        </ul>
       </li>
     );
   },

src/select/select-panel.tsx

@@ -243,7 +243,7 @@ export default defineComponent({
         optionsContent = (visibleData || options).map((groupList: SelectOptionGroup) => {
           const children = groupList.children.filter((item) => tSelect.displayOptionsMap.value.get(item));
           return (
-            <t-option-group v-show={children.length} label={groupList.group} divider={groupList.divider}>
+            <t-option-group label={groupList.group} divider={groupList.divider}>
               {this.renderSingleOption(children)}
             </t-option-group>
           );

src/select/select.tsx

@@ -579,7 +579,8 @@ export default defineComponent({
     const initOptions = () => {
       if (realOptions.value.length || isInit.value) return;
 
-      const children = renderTNode('default');
+      // 这里直接使用 context.slots 没办法拿到后续渲染赋进来的 default slots，采用如下方法动态获取
+      const children = getCurrentInstance().vnode.componentInstance.$scopedSlots.default?.({});
       if (children) {
         realOptions.value = parseOptions(children);
         isInit.value = true;