[Input][Select][Pagination][Tabs][Table] table 分页器在 tabs 切换时表现异常

[huangpiqiao]

tdesign-vue 版本

0.49.0

重现链接

https://codesandbox.io/s/tdesign-vue-demo-forked-xtjhpf?file=/src/demo.vue

重现步骤

1、点击选项卡2

期望结果

分页器正常展示

No response

实际结果

No response

框架版本

No response

浏览器版本

No response

系统版本

No response

Node版本

No response

补充说明

No response

[github-actions]

👋 @huangpiqiao，感谢给 TDesign 提出了 issue。
请根据 issue 模版确保背景信息的完善，我们将调查并尽快回复你。

[github-actions]

♥️ 有劳 @mokywu @gnauhca @chaishi 尽快确认问题。
确认有效后将下一步计划和可能需要的时间回复给 @huangpiqiao 。

[yaogengzhu]

看起来像 destroyOnHide 这个组件未销毁 带来的问题，destroyOnHide 给定true 暂时可以解决你的问题。

[chaishi]

组件之间的依赖关系：Table + Tabs -> Pagination -> Select

初步判定是 Select 组件实现问题，需要排查 Select 组件在 Tabs (destroyOnHide = false)组件中的应用。（这个问题和 Table 关系不大）

[yaogengzhu]

应该是 Select 中某个初始化问题导致。 v-show、v-if 会有不同表现

[skytt]

实际查了一下，应该是 Input 组件 autoWidth 功能在切换时候的问题（Select 依赖了 SelectInput，SelectInput 依赖了 Input；在 Pagination 组件里，使用的 Select 组件开启了 autoWidth 参数，这个参数最终被透传到了 Input 组件中，并在 Input 实现功能），参考：
https://codesandbox.io/s/tdesign-vue-demo-forked-olgby7?file=/src/demo.vue

切换到tab2的时候，宽度默认都回到一个比较窄的值了，Select 的 value 被隐藏了一部分，"10 条/页" 的后半部分被挡住了

[chaishi]

明白了，是 Input 组件 autoWidth 功能，宽度计算问题

[chaishi]

Vue2 resolved in #1749 Tencent/tdesign-common#968

Vue2 修复效果如下

2022-11-06.11.40.15.mov

[chaishi]

Vue3 错误的效果如下

2022-11-06.12.11.01.mov

Vue3 resolved in Tencent/tdesign-vue-next#1968

修复效果同 Vue2

[chaishi]

React 错误效果和 Vue2 一样，切换 Tab 时，分页组件的文本会被隐藏。
问题复现：https://stackblitz.com/edit/react-rlqge3?file=src%2Fdemo.jsx

2022-11-06.12.27.51.mov

react resolved in Tencent/tdesign-react#1669

[uyarn]

fixed in 0.49.4