lowcode-engine icon indicating copy to clipboard operation
lowcode-engine copied to clipboard

组件库拖入画布后设置器无法动态设置初始化数据问题

Open menkeydyvh opened this issue 2 years ago • 1 comments

详细描述

有个需求是当组件库拖入一个ProTable后,通过请求的加载来动态初始化一份‘表格列’数据,并通过现有的设置器功能进行简单的删除和编辑达到减少操作员对表格列数据的工作量

因此使用了如下代码进行处理

import { material } from '@alilc/lowcode-engine';
import { IPublicModelNode } from '@alilc/lowcode-types';

material.addBuiltinComponentAction({
        name: 'myIconName',
        content: {
            icon: () => 'Ⅰ',
            title: '数据帮助加载',
            action(node: IPublicModelNode) {
                // 异步加载数据后设置到表格列
                const columns = [
                    { title: 'ID', dataIndex: 'id', valueType: 'text' },
                    { title: '名称1', dataIndex: 'nickname', valueType: 'text' },
                    { title: '名称1', dataIndex: 'nickname', valueType: 'text' },
                    { title: '名称1', dataIndex: 'nickname', valueType: 'text' },
                    { title: '名称1', dataIndex: 'nickname', valueType: 'text' },
                    { title: '名称1', dataIndex: 'nickname', valueType: 'text' },
                    { title: '名称1', dataIndex: 'nickname', valueType: 'text' },
                    { title: '名称1', dataIndex: 'nickname', valueType: 'text' },
                    { title: '名称1', dataIndex: 'nickname', valueType: 'text' },
                    { title: '头像', dataIndex: 'avatar', valueType: 'avatar' },
                ]
                node.setPropValue('columns', columns)
            }
        },
        important: true,
        condition: (currentNode: IPublicModelNode) => {
            return ['ProTable'].includes(currentNode.componentName);
        },
    });

看了所有文档api并没有办法做到想要的功能,只有看到IPublicModelNode上提供了setPropValue的方法,虽然渲染结果变了但达不到和setters设置器进行联动的效果看如下截图。如果我遗漏了什么api能实现或者这种思路是错误的,麻烦给我一个思路 谢谢!

Screenshots (optional) / ** 截图 **

image

Environments (please complete the following information) (required): / 请提供如下信息(必填)

  • AliLowCodeEngine version: [e.g. 1.1.2] / 低代码引擎版本
  • AliLowCodeEngineExt version: [e.g. 1.0.5] / 低代码引擎扩展包版本
  • Browser chrome / 浏览器版本

(this information can be collected via the manual plugin / 版本信息可通过低代码用户手册插件收集)

menkeydyvh avatar Feb 22 '23 07:02 menkeydyvh

ProTable拖入使用的时候表格列长度默认是10,当使用columns长度改为3时组件会报错

 const columns = [
    { title: 'ID', dataIndex: 'id', valueType: 'text' },
    { title: '名称1', dataIndex: 'nickname', valueType: 'text' },                    
    { title: '头像', dataIndex: 'avatar', valueType: 'avatar' },
]
node.setPropValue('columns', columns)

主要的错误原因是设置时数组长度没有被重置,导致设置进去后的值是上头的colunms和剩余的7个undefined组成的数组

menkeydyvh avatar Feb 22 '23 09:02 menkeydyvh

我也遇到了这个问题,我是在setter中操作的 setValue: (target, value) => { target.parent.setPropValue('columns', [ { title: '编号', dataIndex: 'id', }, { title: '姓名', dataIndex: 'name', }, ]);

  1. columns的setter没有立即渲染
  2. 再次渲染后,也是出现了上述数组长度问题

ming001 avatar Apr 24 '23 06:04 ming001

我也遇到了这个问题,我是在setter中操作的 setValue: (target, value) => { target.parent.setPropValue('columns', [ { title: '编号', dataIndex: 'id', }, { title: '姓名', dataIndex: 'name', }, ]);

  1. columns的setter没有立即渲染
  2. 再次渲染后,也是出现了上述数组长度问题

等他修正把 这个要修改setValue对数组对象的处理,要排除undefined的数据值 我自己覆盖了他array-setter的初始化处理掉了就是了 但我认为不应该是在我改的这边处理应该是设置给组件的方法里处理好要给组件的值才是对的。但官方一直没理会我这个issue

menkeydyvh avatar Apr 24 '23 07:04 menkeydyvh