[table][dialog] 对话框内包含可调整列宽的表格，打开对话框时，列宽计算错误

[sagittarius-rev]

tdesign-vue 版本

tdesign-vue 1.0.8

重现链接

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

重现步骤

在对话框组件内放置一个表格，设置 resizable 为 true ，即允许调整列宽。

表格各个列的设置中，都加入宽度（ width ）属性。

期望结果

渲染出来的表格，各个列宽应当符合列的设置。

实际结果

列宽出现偏差，有的列过宽，而有的列过窄，没有遵循设置。

框架版本

Vue(2.6.14)

浏览器版本

Chrome(109.0.5414.120)

系统版本

Windows 10

Node版本

16.16.0

补充说明

1. 为了便于对比，页面上额外放置了一个表格，不在对话框之内。两个表格的设置、数据基本是相同的。
2. 第一次打开对话框时，列宽计算有可能是正确的，但多次关闭/打开对话框，经常会看到错误的列宽计算结果。
3. 为了便于对比，测试用例中放出了两个开关配置项，一个是控制对话框内表格渲染时使用自增的 key ，另一个是关闭对话框时销毁组件实例（即 destroyOnClose ）。
4. 实际使用中发现，如果表格的部分属性是动态可变的，例如 data 、 columns 等，则渲染过程中还会出现更极端的情况：除了最后一列外，其他所有列都会被挤到看不见。但测试用例中没有构造类型场景。

问题原因分析：

查看源码后发现，表格在计算、重算列宽时，会使用 tableElmWidth 属性的值。而这个值在表格渲染时，是通过调用对应 html 元素的 getBoundingClientRect() 方法得出的。

而对话框在弹出时，有渐变过渡效果，此时表格拿到的元素宽度实际有可能是错误的。因为获取太早，可能会获得一个比较小的值。使用这个值作为表格宽度去计算各个列宽度时，就导致计算结果出现较大偏差。

[github-actions]

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

[github-actions]

♥️ 有劳 @realyuyanan @chaishi @cool-518 尽快确认问题。
确认有效后将下一步计划和可能需要的时间回复给 @sagittarius-rev 。

[sagittarius-rev]

之前提过的类似问题 issue ，也是表格列宽计算与 tableElmWidth 属性值导致的。
#1663

[chaishi]

#2130

[xiaosansiji]

fixed in 1.1.2