##### 功能说明
依赖FormChef实现的自定义多列可编辑表格表单，高阶组件。
该组件推荐在二级表单中渲染明细组件时使用。
因为 EditableTable 的顶部一般都伴随着添加按钮，所以提供了此高阶组件，将添加按钮作为 WrappedComponent 传入，返回包裹着 WrappedComponent 和 EditableTable 的组件，并提供了添加数据的功能。
##### 使用说明
###### WrappedComponent 组件
```js static
function TitleBar(props) {
const {
readOnly,
fieldProperties: {
newBtnLabel,
label,
},
addData
} = props;
const onAdd = () => {
addData({});
};
return (
{!readOnly &&
}
);
}
export default TitleBar;
```
###### TableField
```js static
import WrappedComponent from '.TitleBar';
import {FormDish, WebFormFood,FormFields} from 'maycur-business';
import fieldMaps from 'xx/FormFields'; //引入字段映射关系表
//构建FieldFood，WebFormFood为适用于web端的表单字段容器。
const {TableField} =FormFields;
const FieldFood = FormDish(WebFormFood, { fieldMaps });
const TableFieldWrapper=TableField(WrappedComponent, { FieldFood });
export default function(props){
const tableRef = useRef(null);
const onDelete=()=>{};
const addExtraColumns = useCallback(
(columns) => {
if (!props.readOnly) {
columns.push({
title: '操作',
width: 100,
render: (text, record, index) => {
return (
删除
);
}
});
}
return columns;
},
[readOnly, onDelete],
);
const fieldValidation = (rule, value, callback, source, options) => {
tableRef.current.tableValidation().then(() => {
callback();
}).catch((errors) => {
callback(errors);
});
};
useImperativeHandle(ref, () => ({
fieldValidation
}));
return (
)
}
```
##### API
##### options
高阶组件的入参 options
| 参数 | 说明 | 类型 | 默认值 | 是否必传 |
| --- | --- | ---- | ----- | ------- |
| options.FieldFood | FormChef的FormDish实例化对象 | - | - | 是 |
##### WrappedComponent 组件额外接收的props
高阶组件的入参 WrappedComponent
高阶组件中接收到的 props 会全部传给 WrappedComponent，此外还会多传一个 addData 的方法
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | ---- | ----- |
| addData | 为表格添加数据 | Function(data, addToTop) | - |
| params.data | 新增的数据。会在高阶组件中根据 rowKey 为 data 生成唯一key，所以传入的 data中不必带有key 或者 code | any[] \| object | {} |
| params.addToTop | 是否将数据添加至行首，默认添加至行尾 | boolean | false |
##### 高阶组件 props
见 EditableTable
不用显式的传入 formFields，组件中会将 detailTableFields 作为 formFields 使用。
若需要增加额外的渲染列，可传入 addExtraColumns 方法