111

src/components/EditableForm/editableForm.jsx

@@ -2,7 +2,6 @@ import { Row } from 'antd'
 import React from 'react'
 import EditableFormItem from './EditableFormItem'
 
-
 const EditableForm = ({ dataSource, columns }) => {
   const newColumns = columns.map(item => {
     const newItem = { ...item }
@@ -17,14 +16,26 @@ const EditableForm = ({ dataSource, columns }) => {
       newItem.editable = true
     }
 
+    // 默认组件
+    if (!item.editCellType) {
+      newItem.editCellType = 'input'
+    }
     return newItem
   })
   return (
-      <Row>
-        {newColumns.map(column => (
-          <EditableFormItem key={column.dataIndex} label={column.label} dataIndex={column.dataIndex} record={dataSource[column.dataIndex]} span={column.span} editable={column.editable}/>
-        ))}
-      </Row>
+    <Row>
+      {newColumns.map(column => (
+        <EditableFormItem
+          key={column.dataIndex}
+          label={column.label}
+          dataIndex={column.dataIndex}
+          record={dataSource[column.dataIndex]}
+          span={column.span}
+          editable={column.editable}
+          editCellType={column.editCellType}
+        />
+      ))}
+    </Row>
   )
 }
 

src/components/EditableForm/editableFormItem.jsx

@@ -4,7 +4,7 @@ import { Input, Row, Col } from 'antd'
 import React, { useState, useEffect, useRef } from 'react'
 import './index.less'
 
-const EditableFormItem = ({ label, dataIndex, record, dataId, span = 24 }) => {
+const EditableFormItem = ({ label, dataIndex, record, dataId, span, editCellType }) => {
   const [editing, setEditing] = useState(false)
   const inputRef = useRef(null)
   const [val, setVal] = useState(record)
@@ -40,16 +40,34 @@ const EditableFormItem = ({ label, dataIndex, record, dataId, span = 24 }) => {
     setVal(value)
   }
 
-  const cell = editing ? (
-    // <Form.Item name={dataIndex} noStyle initialValue={record}>
-    //   <Input ref={inputRef} onPressEnter={save} onBlur={save} />
-    // </Form.Item>
-    <Input ref={inputRef} onPressEnter={save} onBlur={save} value={val} onChange={handleOnChange} />
-  ) : (
-    <div className="editable-cell-value-wrap" onClick={toggleEdit}>
-      {val}
-    </div>
-  )
+  let cell = null
+
+  if (editing) {
+    switch (editCellType) {
+      case 'cascader':
+        break
+      case 'select':
+        break
+      default:
+        cell = (
+          <Input
+            ref={inputRef}
+            onPressEnter={save}
+            onBlur={save}
+            value={val}
+            onChange={handleOnChange}
+          />
+        )
+        break
+    }
+  } else {
+    cell = (
+      <div className="editable-cell-value-wrap" onClick={toggleEdit}>
+        {' '}
+        {val}{' '}
+      </div>
+    )
+  }
 
   return (
     <Col span={span}>