ProFormList快速录入秘籍：Excel复制粘贴轻松搞定！

前端

2022-11-09 18:29:27

利用 Excel 复制粘贴，实现 ProFormList 快速数据录入

什么是 ProFormList？

在实际业务场景中，录入大量数据往往是一项繁琐且容易出错的任务。Antd-Pro 中的 ProFormList 组件应运而生，它是一款动态表单组件，可轻松创建和管理动态表单，简化数据录入流程。

快速录入功能的实现

要通过 ProFormList 实现快速录入功能，只需按照以下步骤操作：

1. 创建 ProFormList 表单

使用 Antd-Pro 的 ProForm 和 ProFormList 组件构建表单结构。

2. 配置 Excel 数据源

准备一份包含要录入数据的 Excel 文件，并将数据存储在 JavaScript 变量中。

3. 绑定 Excel 数据源到 ProFormList

将 Excel 数据源绑定到 ProFormList 组件，使表单可以获取和显示数据。

4. 添加复制粘贴事件监听器

在表单上添加一个复制粘贴事件监听器，当用户从 Excel 中复制数据并粘贴到表单中时，它会触发数据解析和更新。

代码示例

import { ProForm, ProFormList } from '@ant-design/pro-form';

const data = [
  { name: '张三', age: 20, gender: '男' },
  { name: '李四', age: 22, gender: '女' },
  { name: '王五', age: 24, gender: '男' },
];

const App = () => {
  const [dataSource, setDataSource] = useState([]);

  useEffect(() => {
    setDataSource(data);

    const form = document.getElementById('form');
    form.addEventListener('paste', (e) => {
      e.preventDefault();

      const clipboardData = e.clipboardData;
      const text = clipboardData.getData('text');

      const rows = text.split('\n');
      const newData = rows.map((row) => {
        const columns = row.split('\t');
        return {
          name: columns[0],
          age: columns[1],
          gender: columns[2],
        };
      });

      setDataSource([...dataSource, ...newData]);
    });
  }, []);

  return (
    <ProForm>
      <ProFormList name="list" dataSource={dataSource}>
        <ProForm.Item label="姓名" name="name" rules={[{ required: true, message: '请输入姓名' }]} />
        <ProForm.Item label="年龄" name="age" rules={[{ required: true, message: '请输入年龄' }]} />
        <ProForm.Item label="性别" name="gender" rules={[{ required: true, message: '请选择性别' }]}>
          <Select>
            <Select.Option value="男">男</Select.Option>
            <Select.Option value="女">女</Select.Option>
          </Select>
        </ProForm.Item>
      </ProFormList>
      <Form.Item>
        <Button type="primary" htmlType="submit">
          提交
        </Button>
      </Form.Item>
    </ProForm>
  );
};

export default App;