如何在Ant Design可拖拽表格拖拽指定行时提示不可拖拽？

我刚帮你梳理了这个需求，核心是要拦截前两行的拖拽行为，同时给出明确的提示。下面是两种可行的方案，从彻底拦截到简单实现都有，你可以根据项目情况选择：

方案一：自定义拖拽Row组件（推荐，彻底拦截拖拽+显示Tooltip） #

这个方案基于Ant Design依赖的react-beautiful-dnd库，自定义表格的Row组件，从拖拽流程的源头拦截前两行的拖拽请求，同时触发Tooltip提示。

步骤1：封装自定义DraggableRow组件 #

import { Table, Tooltip } from 'antd';
import { DragSource } from 'react-beautiful-dnd';

// 自定义可拖拽行组件，加入拖拽拦截和Tooltip逻辑
const DraggableRow = DragSource(
  'row',
  {
    beginDrag(props) {
      // 判断当前行是否是前两行（索引0和1）
      if (props.index < 2) {
        // 触发Tooltip显示
        props.showTooltip(props.record.key);
        // 返回null阻止拖拽流程启动，这样就不会显示拖拽预览
        return null;
      }
      // 正常行返回拖拽标识，不影响原有拖拽功能
      return { id: props.record.key };
    },
  },
  (connect) => ({
    connectDragSource: connect.dragSource(),
  })
)((props) => {
  const { connectDragSource, record, index, tooltipVisible, currentTooltipRow, showTooltip, ...restProps } = props;
  
  return connectDragSource(
    <Tooltip
      title="该行不可拖拽"
      visible={tooltipVisible && currentTooltipRow === record.key}
      placement="top"
      mouseEnterDelay={0}
    >
      <tr 
        {...restProps} 
        style={{ 
          opacity: props.isDragging ? 0.5 : 1,
          cursor: index < 2 ? 'not-allowed' : 'move'
        }} 
      />
    </Tooltip>
  );
});

步骤2：在Table中使用自定义Row #

在你的表格组件里添加状态控制Tooltip的显示，然后替换默认的Row组件：

import { useState } from 'react';

const App = () => {
  // 控制Tooltip的可见性和当前指向的行
  const [tooltipVisible, setTooltipVisible] = useState(false);
  const [currentTooltipRow, setCurrentTooltipRow] = useState(null);

  // 显示Tooltip的方法，3秒后自动隐藏
  const showTooltip = (rowKey) => {
    setCurrentTooltipRow(rowKey);
    setTooltipVisible(true);
    setTimeout(() => setTooltipVisible(false), 3000);
  };

  // 你的表格列和数据配置
  const columns = [
    { title: 'Name', dataIndex: 'name', key: 'name' },
    { title: 'Age', dataIndex: 'age', key: 'age' },
    { title: 'Address', dataIndex: 'address', key: 'address' },
  ];

  const data = [
    { key: '1', name: 'John Brown', age: 32, address: 'New York No. 1 Lake Park' },
    { key: '2', name: 'Jim Green', age: 42, address: 'London No. 1 Lake Park' },
    { key: '3', name: 'Joe Black', age: 32, address: 'Sidney No. 1 Lake Park' },
    { key: '4', name: 'Disabled User', age: 99, address: 'Sidney No. 1 Lake Park' },
  ];

  return (
    <Table
      columns={columns}
      dataSource={data}
      rowKey="key"
      draggable
      components={{
        body: {
          row: (props) => (
            <DraggableRow
              {...props}
              tooltipVisible={tooltipVisible}
              currentTooltipRow={currentTooltipRow}
              showTooltip={showTooltip}
            />
          ),
        },
      }}
    />
  );
};

export default App;

方案优势 #

• 彻底拦截前两行的拖拽流程，不会出现拖拽预览动画，用户一眼就能明白该行不可拖拽
• Tooltip会在用户尝试拖拽时精准显示，提示清晰
• 不影响其他行的正常拖拽功能

方案二：简单禁用拖拽手柄（快速实现） #

如果项目时间紧张，也可以用更简单的方式：给前两行添加禁用样式的拖拽手柄，并配合Tooltip提示，同时禁用该行的拖拽属性。

import { Table, Tooltip } from 'antd';
import { useState } from 'react';

const App = () => {
  const columns = [
    // 自定义拖拽手柄列
    {
      title: '',
      key: 'drag-handle',
      width: 40,
      render: (_, record, index) => {
        if (index < 2) {
          return (
            <Tooltip title="该行不可拖拽">
              <span style={{ cursor: 'not-allowed', color: '#ccc' }}>☰</span>
            </Tooltip>
          );
        }
        return <span style={{ cursor: 'move' }}>☰</span>;
      },
    },
    { title: 'Name', dataIndex: 'name', key: 'name' },
    { title: 'Age', dataIndex: 'age', key: 'age' },
    { title: 'Address', dataIndex: 'address', key: 'address' },
  ];

  const data = [
    { key: '1', name: 'John Brown', age: 32, address: 'New York No. 1 Lake Park' },
    { key: '2', name: 'Jim Green', age: 42, address: 'London No. 1 Lake Park' },
    { key: '3', name: 'Joe Black', age: 32, address: 'Sidney No. 1 Lake Park' },
    { key: '4', name: 'Disabled User', age: 99, address: 'Sidney No. 1 Lake Park' },
  ];

  return (
    <Table
      columns={columns}
      dataSource={data}
      rowKey="key"
      draggable
      // 给前两行添加禁用拖拽属性
      rowProps={(_, index) => ({ draggable: index >= 2 })}
    />
  );
};

export default App;

方案优势 #

• 实现简单，代码量少
• 视觉上明确提示用户该行不可拖拽

内容的提问来源于stack exchange，提问作者gameFrenzy07