最近的低代码项目使用XRender作为表单设计器，但XRender并不自带多标签，下面介绍实现思路和demo。

结果展示

项目地址

Superxmyang/X-Render-mul_tab: 在x-Render中添加多标签的demo (github.com)

应用技术

X-render + mobx

实现思路

把多标签作为一个字段，将该字段直接插入schema中。由mobx来控制字段状态。每次点击标签时，判断Tab标签下是否有其他字段，如果有则加入到移除下方的字段，并将下方字段添加到响应的标签对象中。切换标签时，将标签对象的内容顺序添加到表单设计中。

存在的问题

1. 多标签是建立在字段的基础上，也就是说，这种方法只适用于一行一列的情况。
2. 为了避免用户误触删除标签，需要重写删除按钮，即子表单功能无法实现或需要重新设计。
3. 实现方式较为复杂，再快速移动的情况下可能出现闪屏等现象。

Q.E.D.