Open
Description
下面是自定义表格组件的代码
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 <Input defaultValue={text}/>;
case '数字输入框':
return <InputNumber defaultValue={text}/>;
case '多行输入框':
return <TextArea defaultValue={text} rows={2}/>;
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的默认值,都是相同的。
Metadata
Metadata
Assignees
Labels
No labels