@tntx/entry-lines

以数据驱动的、可以在一行内渲染多个(Antd3)Input、Select、字符、甚至自定义dom,并渲染多个上述行的组件。提供联动、交互功能

Usage no npm install needed!

<script type="module">
  import tntxEntryLines from 'https://cdn.skypack.dev/@tntx/entry-lines';
</script>

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控件的选项数组,当typeselect时,此为必填项 array[{title: , value: }]

何时使用

需要渲染每一行由可以互相联动的输入框、字符等并排构成,且同时存在多个类似的多个行时。

如何使用

由数据驱动,data改变,则组件重新渲染。