在 Web 应用中，保护用户隐私是非常重要的。本文将介绍如何在表格中实现手机号部分隐藏，并在点击后显示完整手机号，同时使用 Ant Design 图标增强用户体验。

react +ant 表格中实现手机号部分隐藏与显示切换功能_自定义单元格

目录

  1. 准备工作
  2. 创建自定义单元格组件
  3. 配置表格列
  4. 完整代码示例
  5. 总结

1. 准备工作

首先，确保你已经安装了 antd 和 @ant-design/icons：

2. 创建自定义单元格组件

我们将创建一个名为 PhoneNumberCell 的自定义单元格组件，用于展示手机号，并在点击时切换显示状态。

PhoneNumberCell 组件

import React, { useState } from 'react';
import { EyeInvisibleOutlined, EyeTwoTone } from '@ant-design/icons'; // 导入 Ant Design 图标

const PhoneNumberCell = ({ phone, onShowFullPhone }) => {
  const [showFullPhone, setShowFullPhone] = useState(false);

  const handlePhoneClick = () => {
    setShowFullPhone(!showFullPhone);
    onShowFullPhone(); // 可以在这里执行其他操作，比如记录日志
  };

  const displayPhone = showFullPhone ? phone : `${phone.slice(0, 3)}****${phone.slice(-4)}`;

  return (
    <div onClick={handlePhoneClick} style={{ cursor: 'pointer', display: 'flex', alignItems: 'center' }}>
      {displayPhone}
      <span style={{ marginLeft: 5 }}>
        {showFullPhone ? <EyeInvisibleOutlined /> : <EyeTwoTone />}
      </span>
    </div>
  );
};

export default PhoneNumberCell;

3. 配置表格列

接下来，在父组件中配置表格列，并使用 PhoneNumberCell 组件来展示手机号。

import PhoneNumberCell from "./component/PhoneNumberCell";

{
    title: 'mobile',
    dataIndex: 'mobile',
    key: 'mobile',
    with:150,
    render: (mobile, record) => (
      <PhoneNumberCell phone={mobile} onShowFullPhone={() => console.log('Show full phone number')} />
    )
  },