alibaba / alibaba/x-render

xrender 1.x的表单设计器,自定义组件,如何给动态的默认值?

Open
#1,626 0 comments 0 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
7.9k
Forks
1.1k
PR merge metrics
No merged PRs in 30d

Description

下面是自定义表格组件的代码
``` ts
import React from 'react';
import { Table as AntTable, Input, InputNumber } from 'antd';
const { TextArea } = Input;
import UploadImgRender from '../../UploadImg/Render'; // 引入自定义的 UploadImg 组件
import { nanoid } from 'nanoid'

const TableComponent = (props: any) => {
const { value, schema, onChange } = props;

// 根据 schema.columns 动态渲染列
const columns = schema?.columns?.map((col: any) => ({
...col,
render: (text: any, record: any, index: number) => {
switch (col.render) {
case '单行输入框':
return ;
case '数字输入框':
return ;
case '多行输入框':
return ;
case '图片上传':
return (
<UploadImgRender/>
);
default:
return text; // 没有特定渲染组件时,返回默认文本
}
},
})) || [];

// 如果 schema.rows 为空,给 rows 设置一个默认值
const dataSource = new Array(schema?.rows || 3).fill(null).map((_, index) => ({
key: index + 1,
...columns.reduce((acc: any, col: any) => {
acc[col.dataIndex] = `Row ${index + 1} - ${col.title}`;
return acc;
}, {}),
}));

return <AntTable columns={columns} dataSource={dataSource} pagination={false} />;
};

// 表格的设置(用于控制设计器中的属性)
const tableSettings = {
text: '表格',
name: 'table',
schema: {
title: '表格',
type: 'string',
widget: 'Table', // 自定义的表格组件
},
setting: {
columns: {
title: '列设置',
type: 'array',
widget: 'List',
items: {
title: '列',
type: 'object',
properties: {
title: {
title: '列名',
type: 'string',
widget: 'Input',
},
dataIndex: {
title: '数据索引',
type: 'string',
widget: 'Input',
default: nanoid(),
},
render: {
title: '渲染组件',
type: 'string',
widget: 'Select',
enum: ['单行输入框', '数字输入框', '多行输入框', '图片上传'],
default: '单行输入框',
},
},
},
},
rows: {
title: '默认行数',
type: 'number',
widget: 'InputNumber',
default: 3,
},
},
};

export { TableComponent as Table, tableSettings };
```

需要给表格dataIndex,生成一个随机的默认值。但是,运行后,每次新增的列。dataIndex的默认值,都是相同的。

![Image](https://github.com/user-attachments/assets/c46b9e28-1cfd-4bf3-a3eb-bdc5472864f0)

Contributor guide

Open the contributing guide

Research direction

Start with the custom tableSettings definition in the reported TypeScript snippet and inspect how the x-render List widget evaluates item defaults when a column is added. Reproduce the issue by adding two columns and comparing their dataIndex values; done means each new column receives a distinct generated default without changing existing columns.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
frontend
Issue type
Bug
Difficulty
2/5
Estimated time
1-3 hours
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
48/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.