@alifd/form-table

table with form

Usage no npm install needed!

<script type="module">
  import alifdFormTable from 'https://cdn.skypack.dev/@alifd/form-table';
</script>

README

可编辑 Table

包名：@alife/whale-form 负责人：游鹿

API

FormTable

参数	说明	类型	默认值
field	自定义 field (一般用于需要设置初始值的时候设置)	Object	-
actions	内置行为包括增加行，删除行，复制行等可选值: 'add', 'addInOrder', 'delete', 'copy'
cols	自定义列	Object	-

cols 配置项

继承 Table.Column API 除此之外有一些其他配置：

参数	说明	类型	默认值
dataKey	[*常用] 作为参数提交时的name，不能重复	String
fieldProps	[*常用] 返回值为对象，该对象的key参考field.init方法的第二个参数options	Function(current, index, record) => Object	-

fieldProps 配置项

参考Field 组件， init方法的第二个参数options API 有如下方法

参数	说明	类型	默认值
initValue	[*常用]组件初始值(组件第一次render的时候才会读取，后面再修改此值无效),类似defaultValue	any
trigger	[*常用]触发数据变化的事件名称	String
rules	[*常用] 校验规则参数参考	Array/Object
valueName	组件值的属性名称，如 Checkbox 的是 `checked`，Input是 `value`	String
getValueFromEvent	自定义从`onChange`事件中获取value的方式，一般不需要设置. 详细用法查看demo `自定义数据获取`	Function(value,...args) 参数顺序和组件是完全一致的

FormTable.Submit

继承 Button API

参数	说明	类型	默认值
field	自定义 field (一般用于需要设置初始值的时候设置)	Object	-
onClick	点击提交后触发签名: Function(value: Object, errors: Object, field: class) => void 参数: value: {Object} 数据 errors: {Object} 错误数据 field: {class} 实例	Function	func.noop
validate	是否校验/需要校验的 name 数组	Boolean/Array	-

FormTable.Reset

继承 Button API

参数	说明	类型	默认值
field	自定义 field (在 Form 内不需要设置)	Object	-
names	自定义重置的字段	Array	-
onClick	点击提交后触发签名: Function() => void	Function	func.noop
toDefault	返回默认值	Boolean	-