[BUG] InputTable 无法渲染自定义组件

atguo commented 2 years ago

描述问题：

InputTable 无法渲染自定义组件

截图或视频：

如何复现（请务必完整填写下面内容）：

你是如何使用 amis 的？在React中使用
amis 版本是什么？请先在最新 beta 版本测试问题是否存在 amis: ^2.1.0

粘贴有问题的完整 amis schema 代码：自定义组件


import { Func } from '@/interface/func';
import FuncGraph from '@/pages/Processor/function/Edit/FuncGraph';
import { FormControlProps, FormItem, Schema } from 'amis';
import { Drawer, Select } from 'antd';
import { useEffect, useState } from 'react';

export const FUNC_COMPONENT_TYPE = 'func-edit' as const;

interface Props extends FormControlProps { returnType?: Func.EDataType; }

const FuncEdit = (props: Props) => { const { value, onChange, returnType, data, env } = props;

env.enableAMISDebug = true;

const [drawerVisible, setDrawerVisible] = useState(false); const [baseType, setBaseType] = useState();

// console.log(data);

const handleFinish = (json: string) => { onChange(json); };

useEffect(() => { setDrawerVisible(baseType === Func.EType.function); }, [baseType]);

return ( <> <Select value={baseType} onChange={setBaseType} style={{ width: 150 }} options={[ { label: '字面量', value: Func.EType.literal, }, { label: '字段', value: Func.EType.field, }, { label: '函数', value: Func.EType.function, }, ]} /> <Drawer title="函数编辑" closable width={'100vw'} height={'100vh'} onClose={() => { setDrawerVisible(false); }} bodyStyle={{ padding: 0 }} visible={drawerVisible} placement={'top'}

<div style={{ position: 'relative', width: '100%', height: '100%' }}>

</> ); };

// https://aisuda.bce.baidu.com/amis/zh-CN/docs/extend/custom-react#%E8%A1%A8%E5%8D%95%E9%A1%B9%E7%9A%84%E6%89%A9%E5%B1%95 export default FormItem({ type: FUNC_COMPONENT_TYPE, autoVar: true })(FuncEdit);

export interface FuncEditSchema extends Schema { type: typeof FUNC_COMPONENT_TYPE; returnType: Func.EDataType; }

Schema

{ "type": "input-table", "name": "fields", "size": "full", "required": true, "readonly": false, "label": "输出字段集", "needConfirm": false, "addable": true, "editable": true, "removable": true, "columnsTogglable": false, "columns": [ { "type": "func-edit", "label": "函数", "name": "function", "size": "md", "required": true, "returnType": "integer" }, { "name": "field_name", "label": "字段名", "type": "input-text" }, { "type": "select", "label": "字段类型", "name": "field_type", "size": "md", "required": true, "readOnly": false, "options": [ { "label": "string", "value": "string" }, { "label": "int", "value": "int" }, { "label": "long", "value": "long" }, { "label": "float", "value": "float" }, { "label": "double", "value": "double" }, { "label": "boolean", "value": "boolean" }, { "label": "binary", "value": "binary" } ] } ] },

不再input-table中渲染是正常的

{ "type": "func-edit", "label": "函数", "name": "function", "size": "md", "required": true, "returnType": "integer" },


5. 操作步骤

github-actions[bot] commented 2 years ago

👍 Thanks for this! 🏷 I have applied any labels matching special text in your issue.

Please review the labels and make any necessary changes.

github-actions[bot] commented 2 years ago

👍 Thanks for this! 🏷 I have applied any labels matching special text in your issue.

Please review the labels and make any necessary changes.

duqingyu commented 2 years ago

同遇到这个问题了，有计划什么时候修复吗

atguo commented 2 years ago

同遇到这个问题了，有计划什么时候修复吗

我的解决方案是：用AMIS的自定义组件自己封装一个InputTable,我使用ant design实现的，你可以试试

duqingyu commented 2 years ago

同遇到这个问题了，有计划什么时候修复吗

我的解决方案是：用AMIS的自定义组件自己封装一个InputTable,我使用ant design实现的，你可以试试

好的，看看官方最近会不会修复先把，如果未修复后边可以考虑，工程量不小

gexMichael commented 1 year ago

+1

baidu / amis