🧐[问题]ProTable中如何实现二级表单（children）列之间的拖拽排序

[Tanzhenglong]

提问前先看看：

https://codesandbox.io/s/tuo-zhuai-pai-xu-forked-ciyfqe?file=/App.tsx

🧐 问题描述

请问在proTable的字段设置弹窗中，如何实现二级表单（children）列之间的拖拽排序
十分感谢你的帮助

🚑 其他信息

[github-actions]

以下的 Issues 可能会帮助到你 / The following issues may help you

• [🧐[问题]如何实现二级表单（children）列之间的拖拽排序 #7020][🧐[问题]如何实现二级表单（children）列之间的拖拽排序][74%]

[Tanzhenglong]

demo 例子https://codesandbox.io/s/tuo-zhuai-pai-xu-forked-ciyfqe?file=/App.tsx
新的问题：含有children层级的table时，二级表头无法实现固定操作

[chenshuai2144]

TAutomatically replying with ChatGPT can be attempted, but it cannot be guaranteed to be completely accurate and may not fully address all issues. Please feel free to reply if you have any further questions or concerns.
此回复基于 ChatGPT 自动生成，可以尝试下方案，官方人员会在一定时间后继续继续处理。

问题解决方案

在 ProTable 中实现含有 children 层级的表头固定操作，可以使用 fixed 属性结合自定义渲染来实现。以下是一个示例代码：

import React from "react";
import ProTable, { ProColumns } from "@ant-design/pro-table";

const columns: ProColumns<any>[] = [
  {
    title: "名称",
    dataIndex: "name",
    width: 200,
    fixed: "left",
  },
  {
    title: "年龄",
    dataIndex: "age",
    width: 100,
    fixed: "left",
  },
  {
    title: "描述",
    dataIndex: "description",
    width: 200,
    children: [
      { title: "身高", dataIndex: "height", width: 100 },
      { title: "体重", dataIndex: "weight", width: 100 },
    ],
  },
];

const data = [
  {
    key: "1",
    name: "John Brown",
    age: 32,
    description: {
      height: 180,
      weight: 75,
    },
  },
  // ...
];

const DemoTable: React.FC = () => {
  return (
    <ProTable<any>
      columns={columns}
      dataSource={data}
      scroll={{ x: "max-content" }}
      headerTitle="示例表格"
      search={false}
      options={false}
      pagination={false}
      toolBarRender={false}
      bordered
      sticky={true}
    />
  );
};

export default DemoTable;

在示例代码中，我们将 "名称" 和 "年龄" 列设置为固定左侧，而含有 children 层级的 "描述" 列则需要进行自定义渲染。在 ProTable 中，可以使用 render 属性来进行自定义渲染，实现二级表头固定。具体做法是将 render 属性设置为一个函数，并在函数内部返回合适的 JSX 元素。

此外，我们还需要设置 scroll 属性来控制水平滚动条的显示，该示例代码中的 scroll={{ x: "max-content" }} 表示根据内容的宽度显示水平滚动条。

希望这个解决方案能够帮助到你，如果有任何疑问，请随时告诉我。