{
+ onChange({...rowData, info: value}, rowData.id)
+ }}
+ />
+ }
+ },
+];
+const dataSource = [
+ { id: 1, gender: "男", name: '邓紫棋', age: '12', info: '又名G.E.M.,原名邓诗颖,1991年8月16日生于中国上海,中国香港创作型女'},
+ { id: 2, gender: "男", name: '李易峰', age: '32', info: '1987年5月4日出生于四川成都,中国内地男演员、流行乐歌手、影视制片人', },
+ { id: 3, gender: "男", name: '范冰冰', age: '23', info: '1981年9月16日出生于山东青岛,中国影视女演员、制片人、流行乐女歌手', },
+ { id: 4, gender: "男", name: '杨幂', age: '34', info: '1986年9月12日出生于北京市,中国内地影视女演员、流行乐歌手、影视制片人。'},
+ { id: 5, gender: "男", name: 'Angelababy', age: '54', info: '1989年2月28日出生于上海市,华语影视女演员、时尚模特。', },
+ { id: 6, gender: "男", name: '唐嫣', age: '12', info: '1983年12月6日出生于上海市,毕业于中央戏剧学院表演系本科班', },
+ { id: 7, gender: "男", name: '吴亦凡', age: '4', info: '1990年11月06日出生于广东省广州市,华语影视男演员、流行乐歌手。', },
+];
+const EditInput = ({edit, value, type, onChange, component, ...other}) => {
+ const [isEdit, setIsEdit] = React.useState(edit);
+ const inputRef = React.useRef();
+ React.useEffect(()=>{
+ isEdit && inputRef.current.focus()
+ }, [isEdit])
+ if(isEdit) {
+ if(component === "Select") {
+ return
+ }
+ return {
+ onChange(e.target.value)
+ setIsEdit(false)
+ }}
+ />
+ }
+ return {
+ setIsEdit(true)
+ }}>{value}
+}
+const Demo = () => {
+ const [data, setData] = React.useState(dataSource)
+ const onChange = (value, id) => {
+ setData(data.map(it=>it.id === id ? value : it))
+ }
+ return
+};
+ReactDOM.render(, _mount_);
+```
+
+### 可编辑行
+
+利用 Form 组件和 render 属性, 实现编辑行效果
+
+
+```jsx
+import ReactDOM from 'react-dom';
+import { Table, Button, Input, Select, Form, Notify } from 'uiw';
+
+const columns = (actived, setChange, fields) => {
+ return [
+ {
+ title: '姓名',
+ ellipsis: true,
+ key: 'name',
+ render: (text,key, rowData) => {
+ if(rowData.id === actived) return fields.name
+ return text
+ }
+ },
+ {
+ title: '性别',
+ key: 'gender',
+ render: (text,key, rowData) => {
+ if(rowData.id === actived) return fields.gender
+ return text
+ }
+ },
+ {
+ title: '年龄',
+ key: 'age',
+ render: (text,key, rowData) => {
+ if(rowData.id === actived) return fields.age
+ return text
+ }
+ },
+ {
+ key: 'id',
+ render: (id, key, rowData)=>{
+ const flag = id === actived
+ if(flag){
+ return <>
+
+
+ >
+ }
+ return
+ }
+ }
+ ]
+};
+const dataSource = [
+ { id: 1, gender: "男", name: '邓紫棋', age: '12', },
+ { id: 2, gender: "男", name: '李易峰', age: '32', },
+ { id: 3, gender: "男", name: '范冰冰', age: '23', },
+ { id: 4, gender: "男", name: '杨幂', age: '34',},
+ { id: 5, gender: "男", name: 'Angelababy', age: '54', },
+ { id: 6, gender: "男", name: '唐嫣', age: '12', },
+ { id: 7, gender: "男", name: '吴亦凡', age: '4', },
+];
+const Demo = () => {
+ const [data, setData] = React.useState(dataSource)
+ const [itemRowData, setItemRowData] = React.useState({})
+ const [id, setId] = React.useState()
+
+ const form = React.useRef()
+ const setChange = (rowData) => {
+ setId(rowData.id)
+ setItemRowData(rowData)
+ form.current.setFields(rowData)
+ }
+
+ return
+};
+ReactDOM.render(, _mount_);
+```
+
## Props
### Table
diff --git a/website/src/routes/components/table/index.tsx b/website/src/routes/components/table/index.tsx
index ab6b515c44..ab87ae4813 100755
--- a/website/src/routes/components/table/index.tsx
+++ b/website/src/routes/components/table/index.tsx
@@ -1,5 +1,5 @@
import React from 'react';
-import { Table, Icon, Empty, Notify, Button, Checkbox, Pagination, Loader, Tooltip } from 'uiw';
+import { Table, Icon, Empty, Notify, Button, Checkbox, Pagination, Loader, Tooltip, Input, Select, Form } from 'uiw';
import Markdown from '../../../components/Markdown';
export default () => (
@@ -15,6 +15,9 @@ export default () => (
Tooltip,
Empty,
Icon,
+ Input,
+ Select,
+ Form,
}}
renderPage={async () => {
const md = await import('uiw/node_modules/@uiw/react-table/README.md');