We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
下面是自定义表格组件的代码
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的默认值,都是相同的。
The text was updated successfully, but these errors were encountered:
No branches or pull requests
下面是自定义表格组件的代码
需要给表格dataIndex,生成一个随机的默认值。但是,运行后,每次新增的列。dataIndex的默认值,都是相同的。
The text was updated successfully, but these errors were encountered: