V15.1.1 SpreadJS设计器中自定义侧边栏数据刷新的问题

收藏

如图：

图一是页面布局；图二是右侧边栏的Command定义；
问题一、右侧sidePanel内容是嵌入的Vue实例，如何通过代码调用的方式主动调用sidePanel的getState(图二)方法，从而实现右侧sidePanel的数据刷新。（之前咨询过老师，提供了designer.refresh()方法，但这个方法是全局的，对性能影响还是蛮大的）

问题二、在点击设计器单元格时，会直接触发对已经打开的sidePanel的getState方法的调用，而且点击一次单元格，会调用很多次getSate方法，执行了很多不必要的代码（会不会对设计器的性能带来影响，毕竟设计器是支持二次开发的）；

以上问题，请老师指教。使用方式有不对的地方，还请老师指正。

Clark.Pan · Clark.Pan

您好，第一个问题能否提供一个具体demo,我们需要看一下您这部分的实现，结合您的实现，通过调试来给出解决方案。
第二个问题，不建议通过vue自身的生命周期来驱动或者调用。因为SpreadJS本身有着自己的生命周期，不同于VUE的生命周期，所以一旦混用会出现很多未知的问题。其实直接按照正常js的方式去驱动就可以了。

新用户 · 新用户

Demo已上传，操作步骤：
1、打开index.html页面
2、点击设计器的数据源按钮，打开左侧面板 --> 在最上方的输入框输入值，点击”点我向左侧面板传参“（预期结果：左侧面板的数据会变化）；
3、在左侧面板中的输入框输入值，点击”提交“，预期结果：alert中会输出输入的值；

存在问题：
1、步骤2中的数据是通过 designer.refresh() 方法触发了设计器全局刷新，进而通过面板的getState方法，将数据传入左侧面板，经测试，这种方式有一定的性能问题，老师是否有其他更好的方案（基于vue的 Bus或者 window的postMessage 显得有些繁琐）；
2、步骤三中是通过 this.raiseValueChanged() 方法触发了 updateValue 方法，通过调试发现，会多次调用updateValue 和 onValueChanged 方法，不知是调用的方式不对，还是其他的问题。

以上，请老师解惑，谢谢。

Derrick.Jiao · Derrick.Jiao

新用户发表于 2022-8-23 15:19
Demo已上传，操作步骤：
1、打开index.html页面
2、点击设计器的数据源按钮，打开左侧面板 --> 在 ...

问题已收到，我们来调研具体原因。

Derrick.Jiao · Derrick.Jiao

新用户发表于 2022-8-23 15:19
Demo已上传，操作步骤：
1、打开index.html页面
2、点击设计器的数据源按钮，打开左侧面板 --> 在 ...

对于问题1，无法单独触发getState，目前只能通过designer.refresh()去全局进行刷新，暂时没有更好的方案。对于性能问题，这个demo中未能体现，建议将能性能问题整理出复现的demo，我们看下能否从内部进行优化。

问题2：这边也分析了对应的逻辑，实现上是没问题的。因为Template或者说是组件的刷新也是会触发这个方法。

		自动登录	找回密码
密码			立即注册

[已处理] V15.1.1 SpreadJS设计器中自定义侧边栏数据刷新的问题

4 个回复

讲师达人

悬赏达人

微信认证勋章

SpreadJS 认证

SpreadJS 高级认证

元老葡萄

GrapeCity