表格新增编辑弹窗复用，企业场景最佳实践

前端

2023-09-15 08:49:52

表格新增/编辑弹窗复用：提升企业软件开发效率

弹窗设计原则

在企业软件开发中，表格操作是不可或缺的功能。其中，新增和编辑操作通常需要复用同一个弹窗（Modal）。设计这些弹窗时，应遵循以下原则：

统一风格： 弹窗外观和交互应与整个系统保持一致，增强用户体验。
清晰简洁： 表单元素布局清晰，字段说明简明扼要，避免用户混淆。
字段必填项标识： 明确标注必填字段，防止用户提交不完整信息。
表单验证： 在提交前进行表单验证，实时提示用户输入错误。
操作按钮明确： 清晰区分新增和编辑按钮，避免用户误操作。

性能优化技巧

为提升弹窗性能，可采用以下技巧：

避免不必要的 DOM 操作： 使用虚拟 DOM 或其他技术，减少 DOM 操作次数。
数据缓存： 在弹窗打开前获取必要数据，避免每次打开弹窗都重新请求。
懒加载： 如果弹窗包含大量数据，使用懒加载技术逐步加载，减少初始渲染时间。
异步请求： 对于需要与后端交互的操作，采用异步请求方式，避免阻塞 UI。
合理使用状态管理： 通过状态管理工具，集中管理弹窗状态，提高代码可维护性。

代码示例

以下是一个使用 React 实现的编辑弹窗示例：

import React, { useState } from 'react';
import Modal from 'antd/lib/modal';
import Form from 'antd/lib/form';
import Input from 'antd/lib/input';
import Button from 'antd/lib/button';

const EditModal = ({ visible, onCancel, onSubmit }) => {
  const [formData, setFormData] = useState(null);

  useEffect(() => {
    // 获取数据
    fetch('/api/data').then(res => setFormData(res.data));
  }, []);

  const handleOk = () => {
    // 提交数据
    onSubmit(formData);
  };

  return (
    <Modal visible={visible} onCancel={onCancel} title="编辑">
      <Form>
        <Form.Item label="名称">
          <Input value={formData?.name} onChange={e => setFormData({ ...formData, name: e.target.value })} />
        </Form.Item>
        <Form.Item label="">
          <Input value={formData?.description} onChange={e => setFormData({ ...formData, description: e.target.value })} />
        </Form.Item>
      </Form>
      <Button type="primary" onClick={handleOk}>保存</Button>
    </Modal>
  );
};