fix(select): Improve options initial parsing logic

src/popup/container.tsx

@@ -2,7 +2,42 @@ import Vue from 'vue';
 import { getAttach } from '../utils/dom';
 import props from './props';
 
+function isContentRectChanged(rect1: DOMRectReadOnly, rect2: DOMRectReadOnly) {
+  if (!rect1 || !rect2) return;
+  if (['width', 'height', 'x', 'y'].some((k) => rect1[k] !== rect2[k])) {
+    return true;
+  }
+  return false;
+}
+
 const Ref = Vue.extend({
+  data() {
+    return {
+      contentRect: null as DOMRectReadOnly,
+    };
+  },
+  mounted() {
+    if (window?.ResizeObserver && this.$el) {
+      const el = this.$el;
+      const vm = this as any;
+      const ro = new ResizeObserver((entries = []) => {
+        const { contentRect } = entries[0] || {};
+        if (isContentRectChanged(contentRect, vm.contentRect)) {
+          vm.contentRect = contentRect;
+          vm.$emit('resize', { ...contentRect });
+          return;
+        }
+        // omit initial change
+        if (!vm.contentRect) {
+          vm.contentRect = contentRect;
+        }
+      });
+      ro.observe(el);
+      this.$on('hook:destroyed', () => {
+        ro.unobserve(el);
+      });
+    }
+  },
   render() {
     const children = this.$slots.default || [];
     if (children.length > 1 || !children[0]?.tag) {
@@ -68,6 +103,6 @@ export default Vue.extend({
     },
   },
   render() {
-    return <Ref>{this.$slots.default}</Ref>;
+    return <Ref onResize={(ev: DOMRectReadOnly) => this.$emit('refResize', ev)}>{this.$slots.default}</Ref>;
   },
 });

src/popup/popup.tsx

@@ -53,6 +53,10 @@ export default Vue.extend({
       /** if a trusted action (opening or closing) is prevented, increase this flag */
       visibleState: 0,
       mouseInRange: false,
+      /**
+       * mark popup as clicked when mousedown
+       * consume this flag right after click event bubbles up to document
+       */
       contentClicked: false,
       refClicked: false,
     };
@@ -328,17 +332,24 @@ export default Vue.extend({
           directives: destroyOnClose
             ? undefined
             : [
-                    {
-                      name: 'show',
-                      rawName: 'v-show',
-                      value: visible,
-                      expression: 'visible',
-                    } as VNodeDirective,
+                {
+                  name: 'show',
+                  rawName: 'v-show',
+                  value: visible,
+                  expression: 'visible',
+                } as VNodeDirective,
             ],
           on: {
             mousedown: () => {
               this.contentClicked = true;
             },
+            mouseup: () => {
+              // make sure to execute after document click is triggered
+              setTimeout(() => {
+                // make sure flag is consumed
+                this.contentClicked = false;
+              });
+            },
             ...(hasTrigger.hover && {
               mouseenter: this.onMouseEnter,
               mouseleave: this.onMouseLeave,
@@ -374,6 +385,11 @@ export default Vue.extend({
             this.updateOverlayStyle();
           }
         }}
+        onRefResize={() => {
+          if (visible) {
+            this.updatePopper();
+          }
+        }}
         parent={this}
         visible={visible}
         attach={this.attach}

src/select/select.tsx

@@ -673,7 +673,7 @@ export default mixins(getConfigReceiverMixins<Vue, SelectConfig>('select')).exte
             <t-option value={this.searchInput} label={this.searchInput} class={`${name}__create-option--special`} />
           </ul>
           {loading && <div class={this.tipsClass}>{loadingTextSlot}</div>}
-          {!loading && !displayOptions.length && !showCreateOption && <li class={this.emptyClass}>{emptySlot}</li>}
+          {!loading && !displayOptions.length && !showCreateOption && <div class={this.emptyClass}>{emptySlot}</div>}
           {!this.hasOptions && displayOptions.length && !loading ? (
             this.renderDataWithOptions()
           ) : (
@@ -685,37 +685,46 @@ export default mixins(getConfigReceiverMixins<Vue, SelectConfig>('select')).exte
         </div>
       );
     },
-  },
+    /**
+     * Parse options from slots before popup, execute only once
+     */
+    initOptions() {
+      if (this.realOptions.length || this.isInited) return;
 
-  updated() {
-    if (this.realOptions.length || this.isInited) return;
+      const children = renderTNodeJSX(this, 'default');
+      if (children) {
+        this.realOptions = parseOptions(children);
+        this.isInited = true;
+      }
 
-    // Parse options from slots before popup, execute only once
-    const children = renderTNodeJSX(this, 'default');
-    if (children) {
-      this.realOptions = parseOptions(children);
-      this.isInited = true;
-    }
+      function parseOptions(vnodes: VNode[]): TdOptionProps[] {
+        if (!vnodes) return [];
+        return vnodes.reduce((options, vnode) => {
+          const { componentOptions } = vnode;
+          if (componentOptions?.tag === 't-option') {
+            const propsData = componentOptions.propsData as any;
+            return options.concat({
+              label: propsData.label,
+              value: propsData.value,
+              disabled: propsData.disabled,
+              content: componentOptions.children ? () => componentOptions.children : propsData.content,
+              default: propsData.default,
+            });
+          }
+          if (componentOptions?.tag === 't-option-group') {
+            return options.concat(parseOptions(componentOptions.children));
+          }
+          return options;
+        }, []);
+      }
+    },
+  },
 
-    function parseOptions(vnodes: VNode[]): TdOptionProps[] {
-      if (!vnodes) return [];
-      return vnodes.reduce((options, vnode) => {
-        if (vnode.componentOptions.tag === 't-option') {
-          const propsData = vnode.componentOptions.propsData as any;
-          return options.concat({
-            label: propsData.label,
-            value: propsData.value,
-            disabled: propsData.disabled,
-            content: propsData.content,
-            default: propsData.default,
-          });
-        }
-        if (vnode.componentOptions.tag === 't-option-group') {
-          return options.concat(parseOptions(vnode.componentOptions.children));
-        }
-        return options;
-      }, []);
-    }
+  mounted() {
+    this.initOptions();
+  },
+  updated() {
+    this.initOptions();
   },
 
   render(): VNode {

test/ssr/__snapshots__/ssr.test.js.snap

@@ -10636,6 +10636,83 @@ exports[`ssr snapshot test renders ./examples/table/demos/custom-cell.vue correc
 </div>
 `;
 
+exports[`ssr snapshot test renders ./examples/table/demos/custom-col.vue correctly 1`] = `
+<div class="tdesign-demo-block-column-large">
+  <div class="t-table t-table--bordered t-table--striped">
+    <div class="t-table__top-content"><button type="button" class="t-button t-size-m t-button--variant-outline t-button--theme-default"><svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-setting">
+          <path fill="currentColor" d="M11 8a3 3 0 11-6 0 3 3 0 016 0zm-1 0a2 2 0 10-4 0 2 2 0 004 0z" fill-opacity="0.9"></path>
+          <path fill="currentColor" d="M8 1.25l6.06 3.38v6.75L8 14.75l-6.06-3.38V4.63L8 1.25zM2.94 5.21v5.58L8 13.6l5.06-2.82V5.2L8 2.4 2.94 5.21z" fill-opacity="0.9"></path>
+        </svg><span class="t-button__text">自定义列</span></button></div>
+    <div class="t-loading__parent">
+      <div class="t-table__content">
+        <table style="table-layout:fixed;">
+          <colgroup>
+            <col style="width:100px;">
+            <col style="width:100px;">
+            <col>
+            <col>
+            <col>
+            <col style="width:200px;">
+          </colgroup>
+          <thead>
+            <tr>
+              <td class="t-align-center row" key="index" colspan="1" rowspan="1" style="overflow:hidden;">序号</td>
+              <td class="" key="platform" colspan="1" rowspan="1" style="overflow:hidden;">平台</td>
+              <td class="" key="type" colspan="1" rowspan="1">类型</td>
+              <td class="" key="default" colspan="1" rowspan="1">默认值</td>
+              <td class="" key="needed" colspan="1" rowspan="1">是否必传</td>
+              <td class="t-text-ellipsis" key="detail.postion" colspan="1" rowspan="1" style="overflow:hidden;">详情信息</td>
+            </tr>
+          </thead>
+          <tbody class="t-table__body">
+            <tr rowKey="index" class="" key="0">
+              <td class="t-align-center row" key="index" length="6" style="overflow:hidden;">0</td>
+              <td class="" key="platform" length="6" style="overflow:hidden;">共有</td>
+              <td class="" key="type" length="6">String</td>
+              <td class="" key="default" length="6">-</td>
+              <td class="" key="needed" length="6">是</td>
+              <td class="t-text-ellipsis" key="detail.postion" length="6" style="overflow:hidden;">读取 0 个数据的嵌套信息值</td>
+            </tr>
+            <tr rowKey="index" class="" key="1">
+              <td class="t-align-center row" key="index" length="6" style="overflow:hidden;">1</td>
+              <td class="" key="platform" length="6" style="overflow:hidden;">私有</td>
+              <td class="" key="type" length="6">Number</td>
+              <td class="" key="default" length="6">0</td>
+              <td class="" key="needed" length="6">否</td>
+              <td class="t-text-ellipsis" key="detail.postion" length="6" style="overflow:hidden;">读取 1 个数据的嵌套信息值</td>
+            </tr>
+            <tr rowKey="index" class="" key="2">
+              <td class="t-align-center row" key="index" length="6" style="overflow:hidden;">2</td>
+              <td class="" key="platform" length="6" style="overflow:hidden;">共有</td>
+              <td class="" key="type" length="6">Array</td>
+              <td class="" key="default" length="6">[]</td>
+              <td class="" key="needed" length="6">否</td>
+              <td class="t-text-ellipsis" key="detail.postion" length="6" style="overflow:hidden;">读取 2 个数据的嵌套信息值</td>
+            </tr>
+            <tr rowKey="index" class="" key="3">
+              <td class="t-align-center row" key="index" length="6" style="overflow:hidden;">3</td>
+              <td class="" key="platform" length="6" style="overflow:hidden;">私有</td>
+              <td class="" key="type" length="6">Object</td>
+              <td class="" key="default" length="6">{}</td>
+              <td class="" key="needed" length="6">否</td>
+              <td class="t-text-ellipsis" key="detail.postion" length="6" style="overflow:hidden;">读取 3 个数据的嵌套信息值</td>
+            </tr>
+            <tr rowKey="index" class="" key="4">
+              <td class="t-align-center row" key="index" length="6" style="overflow:hidden;">4</td>
+              <td class="" key="platform" length="6" style="overflow:hidden;">共有</td>
+              <td class="" key="type" length="6">String</td>
+              <td class="" key="default" length="6">-</td>
+              <td class="" key="needed" length="6">是</td>
+              <td class="t-text-ellipsis" key="detail.postion" length="6" style="overflow:hidden;">读取 4 个数据的嵌套信息值</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`ssr snapshot test renders ./examples/table/demos/custom-header.vue correctly 1`] = `
 <div class="t-table">
   <div class="t-loading__parent">