antd组件库table配置选择框禁用时hover出现提示文案

描述

在实现表格功能时，需要根据每行数据的状态来动态禁用选择框。当选择框被禁用时，还希望能够在鼠标hover时提示用户相关信息。本文将介绍如何通过 antd 的 Table 组件，结合 rowSelection 对象来实现这一需求。

实现方法

方法一：renderCell和getCheckboxProps配合使用

const rowSelection = {
  // 通过renderCell配置hover效果的时机
  renderCell(checked, record, index, node) {
    if (record?.statusDesc === 10) {
        return (
          <Tooltip title="hover展示的文案">{newNode}</Tooltip>
        );
    }
    return node;
  },
  // 通过getCheckboxProps配置选择框禁用效果
  getCheckboxProps: (record) => {
    const checkboxProps = {};
    if (record.statusDesc === 10) {
      checkboxProps.disabled = true;
    }
    return checkboxProps;
  }
};

方法二：仅使用renderCell

适用于renderCell和getCheckboxProps逻辑相同的情况

关键点：

• 通过 React.cloneElement 动态禁用选择框。

const rowSelection = {
    renderCell(checked, record, index, node) {
      if (record?.statusDesc === 10) {
        const newNode = React.cloneElement(node, { disabled: true });
        return (
          <Tooltip title="hover展示的文案">{newNode}</Tooltip>
        );
      }
      return node;
    },
  };

注：两种方法的主要区别在于是否单独使用getCheckboxProps来配置选择框的属性。如果逻辑相同，则可以仅使用renderCell简化代码（但也有弊端table的header的选择框不会被禁用）。