index.jsx

import React, { useEffect, useRef } from "react";
import { EditableProTable } from "@ant-design/pro-table";
import { useUpdate } from 'ahooks';


const EditTable = ({
  columns,
  value,
  onChange,
  rowKey,
  recordCreatorProps,
  maxLength,
  linkconfig,
  style
}) => {
  const update = useUpdate();
  const editorFormRef = useRef();
  
  useEffect(()=>{
    if(value===undefined){
      update()
    }
  },[value])
  console.log(columns[0]);

  return (
    <EditableProTable
      style={{ ...(style ?? {}) }}
      columns={columns}
      rowKey={rowKey}
      value={value || []}
      onChange={onChange}
      recordCreatorProps={
        recordCreatorProps == "false"
          ? false
          : {
            newRecordType: "dataSource",
            record: () => ({
              [rowKey]: Date.now(),
            }),
          }
      }
      editableFormRef={editorFormRef}
      editable={{
        type: "multiple",
        editableKeys: value ? value.map((item) => item[rowKey]) : [],
        actionRender: (row, config, defaultDoms) => {
          return [defaultDoms.delete];
        },
        onValuesChange: async (record, recordList) => {
          let { urlchangeval } = linkconfig ?? {};
          let newvalue = [...recordList];
          if (urlchangeval && record) {//根据url 改变 数据值
            let { params, database, effectresult } = urlchangeval ?? {},
              curvaluerow = value && value.length > 0 ? value.filter(it => it[rowKey] == record[rowKey])[0] : {}
            //获取除本行之外已修改的value值
            newvalue = newvalue.map((it, i) => {
              if (!record) return it;
              if (it[rowKey] == record[rowKey]) {
                let freshvals = {}
                Object.keys(effectresult).map(its => {
                  // freshvals[its] = value[i][its];
                  freshvals[its] = it[its];

                })
                it = {
                  ...record,
                  ...freshvals
                }
              } else {
                it = value && value.length > 0 ? value.filter(its => its[rowKey] == it[rowKey])[0] : {}
              }
              return it
            });

            //参数获取
            let parames = {};
            let ifs = true;
            Object.keys(params).map(it => {
              if (params[it] == "linked") {
                parames[it] = record[it]
                if (record[it] != curvaluerow[it]) {
                  ifs = false;
                }
              } else {
                parames[it] = params[it]
              }
            })
            if (ifs) {
              //值未变化
            } else {
              let res = await database(parames);
              newvalue = newvalue.map((it, i) => {
                if (it[rowKey] == record[rowKey]) {
                  Object.keys(effectresult).map(items => {
                    let result = res?.data?.data ?? {}
                    it[items] = result[effectresult[items]];
                  })
                  editorFormRef.current?.setRowData?.(i, it)
                } else {
                }
                return it
              })
            };

          }
          onChange(newvalue);
        },
      }}
      maxLength={maxLength ?? 1000}
    />
  );
};

export default EditTable;