antdPro中EditableProTable可编辑表单编辑行配置可变下拉框选项和赋值其他字段

避坑

在一个需求中，需要根据上一个下拉框选择的人物来进行对后一个下拉框选项进行变更，并在选中某个人后通过接口对后面的两个字段进行赋值，一开始是准备在onChange中改变下拉框中的options配置，但是发现走不通，需要通过 renderFormItem 和 useMemo 搭配使用，在每次选中之后重新渲染一下columns， 但是不同字段赋值是可以在columns中通过onChange中的hooks来进行双向绑定进行赋值

//整体子表单数据
  const [allTableDate, setAllTableDate] = useState([])  
  const [columnsRowKeys, setColumnsRowKeys] = useState([])


<EditableProTable
            rowKey={"id"}
            toolBarRender={false}
            columns={unitColumns}
            controlled={true}
            name={unitManageId.f_canjiandanwei}
            // scroll={{ x: "max-content" }}
            onChange={setAllTableDate}
            value={allTableDate}
            recordCreatorProps={{
              newRecordType: "dataSource",
              position: "bottom",
              record: () => ({
                id: Date.now(),
              }),
            }}
            editable={{
              type: "multiple",
              editableKeys: columnsRowKeys,
              onChange: setColumnsRowKeys,
              actionRender: (row, _, dom) => {
                // console.log(row, _, dom, "action")
                return [dom.delete]
              },
            }}
            locale={{
              emptyText: "暂无数据",
            }}
          />

这边通过colums中的renderFormItem来自定义字段，并且在点击单位名称的时候来通过useMemo进行对负责人下拉选项的重新渲染，和在负责人中获取整个表单数据并且进行重新替换赋值

  const unitColumns = useMemo(
    () => [
      {
        title: "单位类型",
        dataIndex: unitManageId.f_1699457572241,
        valueType: "select",
        // valueEnum: unitType,
        renderFormItem: (_, data, form) => {
          return <Select options={unitType} showSearch={true}></Select>
        },
      },
      {
        title: "单位名称",
        dataIndex: unitManageId.f_1699457710890,
        valueType: "select",

        renderFormItem: (_, data, form) => {
          return (
            <Select
              options={unitNameOptions}
              showSearch={true}
              // onSelect={onOrgNameSelect}
              onDropdownVisibleChange={() => {
                getOrgName(data?.record?.["f_1699457572241"])
              }}
              value={currentUnitName}
              onChange={(e) => {
                setCurrentUnitName(e)
              }}
            >
              {unitNameOptions?.map((e) => {
                return (
                  <Select.Option key={e.value} value={e.value}>
                    {e.value}
                  </Select.Option>
                )
              })}
            </Select>
          )
        },
      },
      {
        title: "负责人",
        dataIndex: unitManageId.f_1699457797805,
        valueType: "select",

        renderFormItem: (_, data, form) => {
          return (
            <Select
              options={currentLeaderOptions}
              showSearch={true}
              onSelect={async (e) => {
                // console.log(e, 213)
                const res = await getOrgLeaderContact(e)
                if (res.ret == 0) {
                  let currentRowDate = formRef2.current
                    .getFieldValue("f_canjiandanwei")
                    .find((item) => item.id == data.recordKey)
                  console.log(
                    formRef2.current.getFieldValue("f_canjiandanwei"),
                    currentRowDate,
                    allTableDate,
                    data,
                    "config"
                  )
                  currentRowDate["f_1699457896011"] =
                    res?.msg?.data?.[0]?.["f_1587371267567"]
                  currentRowDate["f_1699457973593"] =
                    res?.msg?.data?.[0]?.["f_1587371269100"]
                  setAllTableDate(currentRowDate)
                }
              }}
              onDropdownVisibleChange={() => {
                getOrgLeaderName(data?.record?.["f_1699457710890"])
              }}
              value={currentLeaderName}
              onChange={(e) => {
                setCurrentLeaderName(e)
              }}
            >
              {currentLeaderOptions?.map((e) => {
                return (
                  <Select.Option key={e.value} value={e.value}>
                    {e.value}
                  </Select.Option>
                )
              })}
            </Select>
          )
        },
      },
      {
        title: "联系方式",
        dataIndex: unitManageId.f_1699457896011,
        renderFormItem: (_, data, form) => {
          return (
            <Input
              onChange={(e) => {
                setContactWays(e.target.value)
              }}
              value={contactWays}
            ></Input>
          )
        },
      },
      {
        title: "邮箱",
        dataIndex: unitManageId.f_1699457973593,
      },
      {
        title: "操作",
        valueType: "option",
        width: 80,
      },
    ],
    [unitNameOptions, unitType, currentLeaderOptions, contactWays]
  )