@antdp/edit-table/esm/EditTable/Tr.js

基于antd封装的组件

import _extends from "@babel/runtime/helpers/extends";
import React from 'react';
import RcForm from 'rc-field-form';
import Store from './Store';
import { jsx as _jsx } from "react/jsx-runtime";
export var EditForms = /*#__PURE__*/React.createContext({
  formsRef: new Store(),
  dataSource: [],
  rowKey: 'id',
  onValuesChange: (id, form, value, allValue) => {}
});

/** tr 表格行自定义包裹内容  */
var Tr = props => {
  var [form] = RcForm.useForm();
  var {
    formsRef,
    onValuesChange = () => {},
    dataSource,
    rowKey
  } = React.useContext(EditForms);
  React.useEffect(() => {
    return () => formsRef.remove("" + props['data-row-key']);
  }, []);
  formsRef.register("" + props['data-row-key'], form);
  // 注册
  var initValue = dataSource.find(
  // 防止 字符串和数字进行对比
  item => "" + item[rowKey] === "" + props['data-row-key']);
  return /*#__PURE__*/_jsx(RcForm, {
    onValuesChange: onValuesChange.bind(this, "" + props['data-row-key'], form),
    form: form,
    name: "" + props['data-row-key'],
    component: false,
    initialValues: initValue || {},
    children: /*#__PURE__*/_jsx("tr", _extends({}, props))
  });
};
export default Tr;