antdesign表格标题下面还有子标题

Posted 2023-03-09

一、如图展示表格如何展示下方嵌套的deptName

在这里插入图片描述

官网在这里插入图片描述

二、解决方案

<Column align="center" title="部门" dataIndex=["dept", "deptName"] />
1
1

技术交流分享/面试总结

微信名片

打开CSDN APP，看更多技术内容

最新发布 保姆级教程：Ant Design Vue中 a-table 嵌套子表格
Ant Design Vue中 a-table 嵌套子表格 及只打开一个嵌套表格的方法
继续访问
Antd(Ant-design)，嵌套子表格（expandedRowRender）的异步获取数据
使用阿里的ant-design开源框架，要在表格里面嵌套子表格，需要在用户点击父表格的一行数据后，获取该行的key，然后去异步请求后台的数据用来填充子表格的内容。 如果这样写（省略无关代码）： expandedRowRender = (record) => dispatch( type: 'flow/getPlanList', payload: contractId: record.contract_id, // 该参数...
继续访问
react-ant design table表格 多级可编辑表格
antd-react 3X版本 多级可编辑table
继续访问
react.js ant-design中table 树结构三级嵌套时逻辑问题
实现三级嵌套树结构时，勾选三级里的子节点时候父节点也会自动勾选，当子节点大于一项时候取消勾选某一子结构时父节点不变；当子节点只有一项时父节点也会自动取消勾选 import StandardTablePage from '@/components/StandardTablePage'; // 用户选中某一行 userSelect(record, selected, selectedRows, nativeEvent) let selectedRowKeys = this.st.
继续访问
React antd的table表格之嵌套表格
React antd的table表格之嵌套表格 最近做了几个pc端的后台管理需求，涉及了table中的嵌套表格，嵌套的子表格大体分为两种效果： 效果1-----点击展开新的子表格，旧的子表格关闭 效果2-----可同时展开多个子表格 效果1：嵌套表格，实现点击展开按钮，展开子表格请求接口数据，点击新的子表格收起原来的子表格效果 // 设置一个State用来储存展开的行，控制属性 const [expandedRowKeys,setExpandedRowKeys] = useState<any>
继续访问
vue 嵌套表格组件_支持嵌套对象、多级数组的Vue动态多级表单组件 —— vue-dynamic-form-component...
方便不想看完全篇文章的童鞋，简单总结一下，这是篇软广，主要是推广自己在业务中沉淀的一个开源组件 vue-dynamic-form-component 。基于 element-ui 实现的 vue组件，只需编写类似 async-validator 的规则，自动生成对应的表单，支持常见输入类型的同时，支持嵌套对象、hashmap、多维数组等复杂类型。有需要的童鞋欢迎使用和贡献代码，顺便给个star(我...
继续访问
antd table嵌套子表格 后端动态获取数据 rudex写法示例
有一个需求是可以使主表格里每一栏数据展开，在子table里显示与其相关的子数据项，展开的时候去向后台请求数据显示。 用的组件库是Antd。 首先我们看Antd官方文档的Table有嵌套子表格的功能， 可见我们需要使用expandedRowRender参数，但是尝试在expandedRowRender函数中进行请求，会发现发出了连续的请求，所以我们把请求写在onExpand中，只在点击展开图表的时候发出一次。 之后我们写onExpand函数，注意这里的参数要写上expanded，代表是展开还是合并，我之前
继续访问

React-Antd-表格-嵌套子表格
文档地址: 链接. import Table, Badge, Menu, Dropdown, Space from "antd"; import DownOutlined from "@ant-design/icons"; import useEffect, useState from "react"; export default function App() const columns = [//定义外层表格头数据 title: "姓名", dataInde
继续访问

React antd Table 实现单元格点击 表头斜线分组等功能
react antd 单元格添加点击事件 自定义单元格
继续访问

【进阶Ant-Design-Vue】你知道table多级表头嵌套展开写法吗？
前言： 在Ant-Design-Vue的前端项目中，我们会经常处理表格，表单这些组件元素，熟练运用并知道它们在使用过程中的联系与区别，这是一个前端必不可少的哟。本文我旨在解决两个问题： （1）如何便于更好的嵌套多级表头 （2）如何通过a-checkbox控制全选，单选显示a-table对应的列元素 类似于ElementUI,Ant-Design-vue中有很多相似点，但又不完全苟同，有很多自己独有的写法和思想。相信很多人都是先入手ElementUI,再入手Ant,这其实是对开发者比较友好的方式，如果
继续访问

前端面试题（react）
性能优化分为2个方面setState 是修改其中的部分状态，相当于 Object. assign，只是覆盖，不会减少原来的状态； replaceState 是完全替换原来的状态，相当于赋值，将原来的 state 替换为另一个对象，如果新状态属性减少，那么 state 中就没有这个状态了接收旧的 state 和 action，返回新的 state受控组件就是可以被 react 状态控制的组件 在 react 中，Input textarea 等组件默认是非受控组件（输入框内部的值是用户控制，和React无关）
继续访问

Antd 表格设置表头分组实现可编辑行
主要通过 onCell 方法修改 children 中 cloumn 的属性。
继续访问
antd 能自适应吗_admin-antd-react 是一个后台前端解决方案，它基于 React、Ant Design和 UmiJs实现。...
admin-antd-react 是一个后台前端解决方案，它基于 React、Ant Design和 UmiJs实现。2020-11-11 13:47:08 • 阅读 144 次# 介绍[admin-antd-react](http://demo.admin-antd-react.liqingsong.cc/) 是一个后台前端解决方案，它基于 [React](https://github.com/...
继续访问
react-antd-Table相似表格不同字段处理
1、当两个表格字段相似时，但有一两个字段不同，我们可以将不同的字段单独以对象的形式抽出，根据情况push进去即可。 2、 代码参考 const change = title: '操作', dataIndex: 'operate', key: 'operate', width: '15%', align: 'center', render: (text, record) =>
继续访问
React中控制Ant Design Table列的显示与隐藏
React中控制Ant Design Table列的显示与隐藏
继续访问
热门推荐 使用antd中Table组件某一列有多个变量值需要写入
当某一列需要有多个变量值写入时，我们就不可以再用dataIndex来定义一个ID，具体解决方案将在文中给出。
继续访问
react ant-design table 显示数据以及上传数据显示到另一列中
需求是： 用table展示数据，并在每一行的最后一列中给一个上传附件的按钮，可上传多个附件，上传之后在另一列去显示数据，可以删除附件 因为有别的组件用到columns，他不需要上传附件功能，我就把columns的公共部分提出去了，在这个组件需要的时候在push到column中。 columns如下： /** * 处理上传附件列 */ handleColumn = () => let cArr = this.state.columns;
继续访问
antd 表单一个label下多个内容
1. 如何实现一个 label 旁并排多项内容 比如这样，在 other 的 label 下，既有输入文本域，又有 toggle 开关。同时两者有序地并排在右侧，同一行。 方法是再用一层Form.Item分别包裹右侧内容，并且设置noStyle属性 示例代码： <Form.Item label="Date of Birth:"> <Form.Item name="birthDate" noStyle>
继续访问
React 针对 ant Design select 组件进行二次封装
React 针对 ant Design 库 select 组件进行二次封装 由于业务需要对select进行样式上的修改，部分select还需要使用原样式。这种情况可以通过两种方式来实现： 1 通过className进行样式覆盖 2 通过二次封装组件，相对于仅修改css样式来说更加的灵活 本次介绍第二种方式对组件进行二次封装 /* * @Date 2020/5/8 * @Author zuolinya * @Description antd select组件 二次封装 * 1 设置为圆角 */ import
继续访问
【React 】基于Antd Design的RadioGroup按钮组控件封装 参考技术A Ant Design Vue中 a-table 嵌套子表格
前端为Ant Design Vue 版本为1.6.2，使用的是vue2
Ant Design Vue中 a-table 嵌套子表格，说的可能稍微墨迹了点，不过重点内容都说的比较详细，利于新人理解，高手可以自取完整代码

内容概述：
完成样式及完整代码展示
子表格嵌套
只打开一个嵌套表格
完成样式及完整代码展示
下图为官网图，会在每行最前面多一个加号，点击后会展开，看到子表格的数据
<template>
<div>
<a-card>
<a-table :columns="columns" :data-source="datasource" :bordered="true" :expandedRowKeys="expandedRowKeys"
@expand="getInnerData" :pagination="pagination">
<a-table slot="expandedRowRender" slot-scope="text" :columns="innerColumns" :data-source="inndata"
:pagination="false"></a-table>
<span slot="operation" slot-scope="text, record">
<a-button type="primary" icon="unordered-list" @click="getData(record)">
详情
</a-button>
</span>
</a-table>
</a-card>
</div>
</template>
<script>
import axios from '@/utils/request'

const columns = [

title: '序号',
dataIndex: 'id',
key: 'id',
,
。。。。。中间省略

title: '操作',
key: 'operation',
width: '80px',
scopedSlots: customRender: 'operation' ,
,
];

const innerColumns = [

title: '子表单列',
dataIndex: 'XXX',
key: 'XXX',
,
];

const inndata = [];

export default
data()
return
datasource: [],
columns,
innerColumns,
inndata,
expandedRowKeys:[],
pagination:
//分页
showSizeChanger: true, //是否分页
curPageSizeIndex: 0,
pageSize: 10, //一页显示多少条
// total: 1, //总条数
current: 1, //当前显示页面
pageSizeOptions: ['10', '20', '30'],
showTotal: (total) => `共计 $total条`, //显示总数
onShowSizeChange: (current, pagesize) =>
this.pagination.current = current
this.pagination.pageSize = pagesize
this.options.offset = (current - 1) * pagesize
this.options.limit = pagesize
this.refreshData()
,
onChange: (current, pageSize) =>
this.pagination.current = current
this.options.offset = (current - 1) * pageSize
this.options.limit = pageSize
this.refreshData()
,
,

,

mounted()
this.refreshData()
,
methods:
refreshData()
axios(
url: 'url',
method: 'post',
).then((res) =>
if (res.errCode > 0)
this.$notification.error(
message: '错误信息',
description: res.errMsg,
)
return

console.log(res, '数据')
this.datasource = res
)
,

getInnerData(expanded, record)
this.expandedRowKeys=[]
if (expanded)
var b = ''
b=(record.id-1).toString()
this.expandedRowKeys.push(Number(b.slice(-1)))
this.inndata = [];
this.inndata.push(this.datasource[record.id - 1])

,

getData(record)
console.log(record);
,

,

</script>
<style scoped>
</style>
登录后复制

子表格嵌套
子格嵌套从代码层简单理解就是一个<a-table></a-table>中套了一个<a-table></a-table>，即<a-table><a-table></a-table></a-table>，当然，这只是一个简单理解，并不是这样写，要在其中添加一些东西。
抛开一些配置项，解释下：

<template>
<div>
<a-card>
// 这里开始是父表格组件，columns -> 父级列名，datasource -> 父级表中的数据， @expand="getInnerData" -> 点开子表单的操作函数，pagination -> 分页的设置
<a-table :columns="columns" :data-source="datasource"
@expand="getInnerData" :pagination="pagination">
// 这里开始是子表格组件，slot="expandedRowRender" 重点，必须有，innerColumns-> 子级列名，inndata-> 子级表中的数据，
<a-table slot="expandedRowRender" slot-scope="text" :columns="innerColumns" :data-source="inndata"
:pagination="false"></a-table>// 这里是子表格组件结尾
// 这里是父表格span，不用的可以删掉
<span slot="operation" slot-scope="text, record">
<a-button type="primary" icon="unordered-list" @click="getData(record)">
详情
</a-button>
</span>
</a-table>// 这里是父表格组件结尾
</a-card>
</div>
</template>
<script>
// 数据请求axios
import axios from '@/utils/request'

// 设置父级列名
const columns = [

title: '序号',
dataIndex: 'id',
key: 'id',
,
。。。。。中间省略

title: '操作',
key: 'operation',
width: '80px',
scopedSlots: customRender: 'operation' ,
,
];

// 设置子级列名
const innerColumns = [

title: '子表单列',
dataIndex: 'XXX',
key: 'XXX',
,
];

// 设置子级数据，写下面data里也行
const inndata = [];

export default
data()
return
datasource: [],
columns,
innerColumns,
inndata,
pagination:
//分页
showSizeChanger: true, //是否分页
curPageSizeIndex: 0,
pageSize: 10, //一页显示多少条
// total: 1, //总条数
current: 1, //当前显示页面
pageSizeOptions: ['10', '20', '30'],
showTotal: (total) => `共计 $total条`, //显示总数
onShowSizeChange: (current, pagesize) =>
this.pagination.current = current
this.pagination.pageSize = pagesize
this.options.offset = (current - 1) * pagesize
this.options.limit = pagesize
this.refreshData()
,
onChange: (current, pageSize) =>
this.pagination.current = current
this.options.offset = (current - 1) * pageSize
this.options.limit = pageSize
this.refreshData()
,
,

,

mounted()
// 进入页面直接运行的函数
this.refreshData()
,
methods:
// 异步请求获取数据
refreshData()
axios(
url: 'url',
method: 'post',
).then((res) =>
if (res.errCode > 0)
this.$notification.error(
message: '错误信息',
description: res.errMsg,
)
return

console.log(res, '数据')
// 将数据赋值给父级表格
this.datasource = res
)
,

// 点开子级表格（就是点击那个加号）触发的函数
getInnerData(expanded, record)
// 判断是否点开
if (expanded)
// 点开后执行。。。
// 先将子级表格数据清空，否则之前点开别的行的数据也会在里面
this.inndata = [];
// 再将父级点击的那一行的数据（record）给子级数据存进去，具体情况根据自己需求更改
this.inndata.push(record)

,
// 点击父级表格表格span，也就是那个“详情”按钮触发的函数
getData(record)
console.log(record);
,

,

</script>
<style scoped>
</style>
登录后复制

通过上述操作会发现能够实现基本的子表格嵌套，但是会发现点开一个子表单后，再点一个，两个都会打开，但是里面的子表格数据是相同的，这就是个很大的问题，为了解决这个问题，请看下面，这个在官网没直接写出来，API里有相关的参数，现在告诉你应该怎样操作

只打开一个嵌套表格
为了防止点开多个子表格内容相同，再结合我自己的使用场景，我只需要展开一个子表格就行，也就是说点开新的子表格后，原来的子表格自动关闭
下面把需要改动的代码片段给你们：
1. 父级中的修改内容

// 添加 :expandedRowKeys="expandedRowKeys" 目的是使expandedRowKeys只有最新点开子表单的key
<a-table :columns="columns" :data-source="datasource" :bordered="true" :expandedRowKeys="expandedRowKeys"
@expand="getInnerData" :pagination="pagination">
<a-table slot="expandedRowRender" slot-scope="text" :columns="innerColumns" :data-source="inndata"
:pagination="false"></a-table>
<span slot="operation" slot-scope="text, record">
<a-button type="primary" icon="unordered-list" @click="getData(record)">
详情
</a-button>
</span>
</a-table>
登录后复制

2. 在data里加上空的 expandedRowKeys

export default
data()
return
datasource: [],
columns,
innerColumns,
inndata,
// 添加空的expandedRowKeys
expandedRowKeys:[],
。。。。。。
登录后复制

3. 修改getInnerData函数

getInnerData(expanded, record)
// 先将expandedRowKeys数据清空
this.expandedRowKeys=[]
if (expanded)
// 将父级的第几条数据传到expandedRowKeys里，我这用的是数据表里的id处理的，我的id是从1开始
// 我这是一页十条数据，要放入0-9，第一条是0，第十条是9，一定要是数字格式
// 再一个，注意下，假设使用的是数据中的第45条，record.id=45
// 但是传入 expandedRowKeys 只能是0-9，且是数字格式，那么应该将数字4传到expandedRowKeys中
// 因为record.id=45这条数据，在表格中的第五行，应该是4
// 所以有了下面的record.id-1，再转成字符串格式，取最后一位，再转成数字
// 也有人用key,id能够获取到，不过我没弄成功，就这样吧，实现功能就行
var b=(record.id-1).toString()
this.expandedRowKeys.push(Number(b.slice(-1)))

// 下面两行说过，我就把注释直接粘过来了
// 先将子级表格数据清空，否则之前点开别的行的数据也会在里面
this.inndata = [];
// 再将父级点击的那一行的数据（record）给子级数据存进去，具体情况根据自己需求更改
this.inndata.push(record)

, 参考技术B ant design Cascader的浮层中每级添加标题
    在 ant design Cascader 的浮层中每级添加标题，浮层是否有显示不会影响浮层最后在文档中的样式。而浮层中的每个元素都需要添加样式。
    如果您已经为要添加的浮层中的一些元素设置了标题，那么在修改其他元素的时候，会自动将它们添加到该标题下面并将原来被覆盖的内容隐藏起来。如果您想要在添加新的浮层或者从已存在的浮层删除浮层，那么必须对浮层进行分组操作，才能对所添加的浮层执行相应的命令 参考技术C ant design vue s-table 组件使用 this.selectedRowKeys = [] 控制 table 的选中会失效，而官网 < a-table> 没问题，有谁知道怎么解决

React/AntDesign 如何使行可拖动？ （表格拖动排序）

【中文标题】React/AntDesign 如何使行可拖动？ （表格拖动排序）

【英文标题】：React/AntDesign How to make rows draggable? (Table Drag Sorting)

【发布时间】：2019-12-20 06:22:35

【问题描述】：

我一直在编写这个简单的单列拖放表，但是当我拖动它们时行并没有移动。我在哪里修复或检查？

我正在使用 React、AntDesign 和 JavaScript（使用 TypeScript）

import * as React from 'react';

import ReactDOM from "react-dom";

import  Table  from "antd";

import  DndProvider, DragSource, DropTarget  from "react-dnd";

import HTML5Backend from "react-dnd-html5-backend";

import update from "immutability-helper";

let dragingIndex = -1;

interface propsDD 
    isOver: any,
    connectDragSource: any,
    connectDropTarget: any,
    moveRow: any,
    restProps: 
        readonly [x: string]: any;
        children?: React.ReactNode;
    
    className: any,
    index: any,


class BodyRow extends React.Component<propsDD>
    render() 
        const  isOver, connectDragSource, connectDropTarget, moveRow, ...restProps  = this.props;
        const style =  ...restProps, cursor: 'move' ;
        let  className  = restProps;
        if (isOver) 
            if (restProps.index > dragingIndex) 
                className += " drop-over-downward";
            
            if (restProps.index < dragingIndex) 
                className += " drop-over-upward";
            
        
        return connectDragSource(
            connectDropTarget(
                <tr ...restProps className=className style=style />
            )
        );
    


const rowSource = 
    beginDrag(props: any) 
        dragingIndex = props.index;
        return 
            index: props.index,
        ;
    ,
;

const rowTarget = 
    drop(props: any, monitor: any) 
        const dragIndex = monitor.getItem().index;
        const hoverIndex = props.index;
        if (dragIndex === hoverIndex) 
            return;
        
        props.moveRow(dragIndex, hoverIndex);
        monitor.getItem().index = hoverIndex;
    ,
;

const DragableBodyRow = DropTarget("row", rowTarget, (connect, monitor) => (
    connectDropTarget: connect.dropTarget(),
    isOver: monitor.isOver()
))(
    DragSource("row", rowSource, connect => (
        connectDragSource: connect.dragSource()
    ))(BodyRow)
);

const columns = [
    
        title: 'Orden de Ejecución',
        dataIndex: 'attributes.name',
        key: 'name',
    ,
];

type propsFromList = 
    receivedTasks: Task[],
    onReceivedTasks: (tasks: Task[]) => void,


export default class DDTasks extends React.Component<propsFromList, State>
    public state: State = 
        data: [],
    ;

    components = 
        body: 
            row: DragableBodyRow,
        ,
    ;

    onReceivedTasks(tasks: Task[]): void 
        this.setState(
            data: this.props.receivedTasks,
         as State)
    

    moveRow = (dragIndex: any, hoverIndex: any) => 
        const  data  = this.state;
        const dragRow = data[dragIndex];
        this.setState(
            update(this.state, 
                data: 
                    $splice: [[dragIndex, 1], [hoverIndex, 0, dragRow]]
                
            )
        );
    ;

    render() 
        return (
            < DndProvider backend=HTML5Backend >
                <Table
                    rowKey="id"
                    bordered=true
                    pagination=false
                    columns=columns
                    dataSource=this.props.receivedTasks
                    components=this.components
                    onRow=(index) => (
                        index,
                        moveRow: this.moveRow,
                    )
                />
            </DndProvider >
        );
    

我希望拖动行。实际显示的是行的内容。

【问题讨论】：

我已经添加了拖拽效果的 CSS 样式（drop-over-downward & drop-over-upward）。

这里是实际行为的 gif makeagif.com/i/TIw7Qx

【参考方案1】：

这是一个简单的例子，我根据我在网上找到的许多不同的东西提出了一个简单的例子，并最终制定了一些适用于我的代码的东西：

基本上这是被调用的反应组件表的主体，我正在通过索引映射一个位置列表，并且每一行都是可拖动的，以允许用户修改表。我还包括了与属性关联的函数调用

return (
        <Tbody>
            items.map((item, index) => (
                    <Tr key=index className="item.name"
                        draggable=true
                        onDragStart=this.dragstart
                        onDragEnd=this.dragend
                        onDragLeave=this.dragend
                        onDragEnter=this.dragend
                        onDrop=this.drop
                        onDragOver=this.dragend
                        id=index >
                        <Td><span>item.name</span></Td>
                        <Td><span>item.latitude</span></Td>
                        <Td><span>item.longitude</span></Td>
                        <Td type="data"><span>this.checkForZero(this.props.propDistances[index])</span></Td>
                        <Td type="data"><span>this.checkForZero(this.props.propCumulativeDist[index])</span></Td>
                    </Tr>
            ))
            this.finishItineraryTable()
        </Tbody>
    );

dragstart(event) 
    let dataTransfer = event.dataTransfer;
    let node = event.target;
    dataTransfer.setData('text/plain',node.innerHTML);
    dataTransfer.setData('id',node.id);
    event.stopPropagation();


dragend(event) 
    event.preventDefault();


drop(event) 
    event.preventDefault();
    let dragObjHtml = event.dataTransfer.getData("text/plain");
    let dragObjId = document.getElementById(event.dataTransfer.getData("id"));
    let dropTarget = event.target.closest("tr");
    let temp = dropTarget.innerHTML;
    dropTarget.innerHTML = dragObjHtml;
    dragObjId.innerHTML = temp;

【参考方案2】：

在粘贴我的长长的代码之前，我想提几点：

它很大程度上基于original drag sorting example。 幸运的是，React DnD 具有完美的 TypeScript 支持，因为它是用 TypeScript 编写的。 下面的代码是 Ant 设计 <table> 的替代代码。 这是通用的。 它使用功能组件和钩子。 有一个onDragSort，每次发生某些拖动排序时都会回调它。该参数包括排序后的数据。

首先安装包react-dnd 和react-dnd-html5-backend。将此添加到您的DragSortingTable.tsx：

import * as React from 'react';
import Table,  TableProps, TableComponents  from 'antd/lib/table';
import  DndProvider, DropTarget, DragSource, DragElementWrapper, DropTargetSpec  from 'react-dnd';
import HTML5Backend from 'react-dnd-html5-backend';

let dragingIndex = -1;

interface BodyRowProps 
  isOver: boolean;
  connectDragSource: DragElementWrapper<>;
  connectDropTarget: DragElementWrapper<>;
  style?: React.CSSProperties;
  index: number;
  className?: string;


const BodyRow: React.FC<BodyRowProps> = props => 
  const style =  ...props.style, cursor: 'move' ;

  let  className  = props;
  if (props.isOver) 
    if (props.index > dragingIndex) 
      className += ' drop-over-downward';
    
    if (props.index < dragingIndex) 
      className += ' drop-over-upward';
    
  

  return props.connectDragSource(
    props.connectDropTarget(
      <tr className=className style=style>
        props.children
      </tr>
    )
  );
;

const rowSource = 
  beginDrag(props) 
    dragingIndex = props.index;
    return 
      index: props.index
    ;
  
;

interface DropProps 
  index: number;
  moveRow: (dragIndex: number, hoverIndex: number) => void;


const rowTarget: DropTargetSpec<DropProps> = 
  drop(props, monitor) 
    const dragIndex = monitor.getItem().index;
    const hoverIndex = props.index;

    // Don't replace items with themselves
    if (dragIndex === hoverIndex) 
      return;
    

    // Time to actually perform the action
    props.moveRow(dragIndex, hoverIndex);

    // Note: we're mutating the monitor item here!
    // Generally it's better to avoid mutations,
    // but it's good here for the sake of performance
    // to avoid expensive index searches.
    monitor.getItem().index = hoverIndex;
  
;

const DragableBodyRow = DropTarget<DropProps>('row', rowTarget, (connect, monitor) => (
  connectDropTarget: connect.dropTarget(),
  isOver: monitor.isOver()
))(
  DragSource('row', rowSource, connect => (
    connectDragSource: connect.dragSource()
  ))(BodyRow)
);

interface DragSortingTableProps<T> extends TableProps<T> 
  onDragSort?: (sortedData: T[]) => void;


type extractTableType<T> = T extends DragSortingTableProps<infer T> ? T : never;

export const DragSortingTable: <T>(
  props: DragSortingTableProps<T>
) => React.ReactElement<DragSortingTableProps<T>> = props => 
  const [dataSource, setDataSource] = React.useState(props.dataSource);

  React.useEffect(() => 
    setDataSource(props.dataSource);
  , [props.dataSource]);

  const components: TableComponents = 
    body: 
      row: DragableBodyRow
    
  ;

  const moveRow: DropProps['moveRow'] = (dragIndex, hoverIndex) => 
    const dragRow = dataSource[dragIndex];
    const remaining = dataSource.filter(i => i !== dragRow);
    const sorted = [...remaining.slice(0, hoverIndex), dragRow, ...remaining.slice(hoverIndex)];

    setDataSource(sorted);

    if (props.onDragSort) 
      props.onDragSort(sorted);
    
  ;

  const tableProps: TableProps<extractTableType<typeof props>> = 
    ...props,
    className: props.className ? props.className + ' drag-sorting-table' : 'drag-sorting-table',
    components,
    dataSource,
    onRow: (_record, index) => ( index, moveRow )
  ;

  return (
    <DndProvider backend=HTML5Backend>
      <Table ...tableProps>props.children</Table>
    </DndProvider>
  );
;

将以下样式添加到您的 antd.less 覆盖：

.drag-sorting-table tr.drop-over-downward td 
  border-bottom: 2px dashed @primary-color;


.drag-sorting-table tr.drop-over-upward td 
  border-top: 2px dashed @primary-color;

按如下方式使用您的新拖动排序表：

<DragSortingTable<Users>
      dataSource=props.users
      rowKey='id'
    >
      <Column
        title='Title'
        dataIndex='id'
        key='id'
      />
</DragSortingTable>

【参考方案3】：

你添加了antd sortable table的CSS来展示拖拽效果吗？

#components-table-demo-drag-sorting tr.drop-over-downward td 
  border-bottom: 2px dashed #1890ff;


#components-table-demo-drag-sorting tr.drop-over-upward td 
  border-top: 2px dashed #1890ff;

这里是sandbox link

【讨论】：

是的，正如你所说，我已经添加了 CSS 样式。在之前的测试中，显示了拖拽效果，但是在这个版本中没有。

你用的是哪个版本的antd，能不能更新一下你的antd版本再查看

我不太确定我使用的是哪个 AntD 版本，但是，这是我试图复制的原始源代码：ant.design/components/table/#components-table-demo-drag-sorting

【参考方案4】：

我也在寻找类似的功能 并在 antd 表的帮助下开发了我自己的支持多行拖放的组件。

拖放表格行以重新排序表格数据。

用户可以通过“cntrl + click”选择多行

https://github.com/sojinantony01/react-multi-row-dragable-table-antd