README
EntryLines 多行数据录入
以数据驱动的、可以在一行内渲染多个(Antd3)Input、Select、字符、甚至自定义dom,并渲染多个上述行的组件。提供联动、交互功能
安装、发布与源码
安装:npm i @tntx/entry-lines
发布:https://www.npmjs.com/package/@tntx/entry-lines
源码:https://github.com/YuDGang/entry-lines-react/tree/master/src/components/EntryLines
更新日志
- 1.0.0 数据驱动的EntryLines发布;
API
参数 | 说明 | 类型 |
---|---|---|
columns | EntryLines的配置描述,具体项见下表 | ColumnProps[] |
data | 数据数组 | any[] |
disabled | 数据框的禁用状态 | boolean |
onDataChange | 数据改变时触发的回调,参数1为完整的data,请确保此函数正确的改变了data,以保证组件及时更新 |
Function(data) |
footer | 底部额外的Node | ReactNode(operateCallback) |
Columns
参数 | 说明 | 类型 |
---|---|---|
type | 输入控件的类型,可选'input' 、'inputNumber' 、'select' |
string |
dataIndex | 输入控件数据在数据项中对应的 key | string |
visible | 可见性 | boolean | Function(source, record)) |
render | 渲染自定义Node | ReactNode |
operateRender | 渲染操作类型的自定义Node,参数中附带了对数据的操作回调 | ReactNode(record, operateCallback) |
colSpan | 栅格占位格数, 共24格 | number |
options | Select.Option控件的选项数组,当type 为select 时,此为必填项 |
array[{title: , value: }] |
何时使用
需要渲染每一行由可以互相联动的输入框、字符等并排构成,且同时存在多个类似的多个行时。
如何使用
由数据驱动,data改变,则组件重新渲染。