Skip to content
New issue

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

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

Open
freesaber opened this issue Feb 13, 2025 · 0 comments

Comments

@freesaber
Copy link

下面是自定义表格组件的代码

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的默认值,都是相同的。

Image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant