Tencent/tmagic-editor中table组件使用page-fragment-select的选择问题解析

在Tencent/tmagic-editor项目中，开发者在表单中使用table组件结合page-fragment-select选择器时遇到了一个有趣的问题：当选择页面片时，runtime的props中的config不会自动更新，但通过展开配置进行选择却能正常触发更新。

问题现象

开发者在使用tmagic form schema构建表单时，配置了一个table组件，其中包含page-fragment-select选择器。当直接在下拉框中选择不同的页面片时，runtime中的props.config不会相应更新，导致视图不刷新。然而，当通过table的"展开配置"功能进行选择时，却能正常触发更新。

问题根源

经过深入分析，发现问题出在table组件的row-key配置上。在tmagic-editor的实现中：

1. table组件默认使用'id'作为element-plus table的row-key
2. 当开发者将page-fragment-select的name也设置为'id'时
3. 选择不同的页面片会导致id值变化
4. 这会触发element-plus table的重新渲染
5. 重新渲染过程中可能丢失了某些状态，导致更新未能正确传播到runtime

解决方案

针对这个问题，有以下几种解决方案：

1. 避免使用'id'作为字段名：将page-fragment-select的name改为其他名称，如'pageFragmentId'或'id1'等

2. 自定义row-key：通过table的rowKey属性指定一个不会随选择变化的字段作为row-key

3. 确保数据一致性：如果必须使用'id'作为字段名，需要确保在数据更新时保持row-key的稳定性

最佳实践

在使用tmagic-editor的table组件时，建议：

1. 对于包含动态选择器的列，避免使用'id'作为字段名
2. 明确指定rowKey为一个稳定的字段
3. 对于页面片选择，推荐使用'pageFragmentId'作为标准字段名
4. 在自定义组件中，确保正确处理props的更新

技术原理

这个问题本质上反映了Vue响应式系统与element-plus table组件之间的交互问题。当row-key对应的值发生变化时，table会认为这是一条新数据而重新创建行，而不是更新现有行。这种设计在大多数情况下是有益的，但在特定场景下可能导致状态丢失。

理解这一机制有助于开发者在复杂表单场景中做出更合理的设计决策，避免类似问题的发生。