element-UI穿梭框Transfer,目标列表数据(右边列表)会随源列表数据(左边列表)的变化而同步变化

【问题描述】element-UI穿梭框Transfer,目标列表数据(右边列表)会随源列表数据(左边列表)的变化而同步变化,

【业务场景】综合表单组件,具有自定义筛选条件的基础类穿梭框,每查询一次,源列表数据随查询条件不同而变化,但目标列表数据不能变化,要保留用户已选择到目标列表的数据,除非用户手动将目标列表数据移动到左边源数据中,如下图:

【问题定位】左边列表数据不能独立累加,会变化的原因是,Transfer组件中将左边列表数据与右边列表数据做了绑定,只有左边列表存在的数据才能选到右边列表中

【解决过程】既然右边不能独立累加,那我们可以通过自定义第三方变量,存储右边所有数据并去重,实现累加,但此方法行不通,因为即使第三方变量已经实现了累加并将其赋值给右边列表,右边列表中也不会显示累加的结果

原因是左边没有的书不会出现在右边,所以问题的根源在于左边的源数据

【问题解决】通过实时向源数据中添加目标列表中的数据并去重来解决.具体为:.当目标数据不为空的情况下,每查询一次,将目标列表数据添加到源列表数据中并去重.这样,组件内部会自动将目标列表中的数据,放置目标

列表中(组件中,源列表和目标列表的数据是互斥的),至此就实现了,目标数据独立累加,不会随源数据变化而变化了