antd table组件 鼠标划过异步调取接口，展示信息

在一些特定的需求下，后端由于设计问题，不会将所有的信息返回到接口中，鼠标划过显示，并且请求接口，展示对应得卡片信息；

下面我封装了一个pover卡片，及接口请求调佣用问题，及使用

调用，使用antd 4.18.2版本

仅展示部分数据

import UserTips form 'userTips'
//antd column上使用
		[{
			title: i18next.t('更新人'),
			dataIndex: 'updater',
			render(text) {
				return <UserTips text={text} />;
			}
		}]

封装的组件

import React, { useState } from 'react';
import { Typography, Popover } from 'antd';
import { getUserInfo } from '@/service/common';
import './style.less';
import axios from 'axios';

const { Paragraph } = Typography;

/**
 * axios 取消接口请求操作
 */
let sourceToken = axios.CancelToken.source();

const UserTips = ({ text }) => {
	let timer: any = null; // eslint-disable-line
	const [show, setShow] = useState(false); //弹框的显隐
	const [data, setData] = useState<CommonObjectType>({}); //展示信息
	const [errorType, setErrorType] = useState(false); //展示标识
	/**
	 * 鼠标滑入后调取接口
	 */
	const onMouseOver = () => {
		sourceToken = axios.CancelToken.source();
		clearTimeout(timer);
		timer = setTimeout(function () {
			getMsg();
		}, 500);
	};

	/**
	 * 获取人员信息的参数
	 */
	const getMsg = () => {
		getUserInfo(
			{ username: text },
			{
				cancelToken: sourceToken.token
			}
		).then((res: CommonObjectType) => {
			setShow(true);
			if (res.meta.code === 0) {
				setData(res.data);
			} else {
				setErrorType(true);
			}
		});
	};

	/**
	 * 鼠标离开后清空参数
	 * 并隐藏pover
	 */
	const onMouseOut = () => {
		clearTimeout(timer);
		setShow(false);
		setErrorType(false);
		sourceToken.cancel('取消请求');
	};

	return (
		<div className="user-tips">
			<Popover
				overlayStyle={{ width: '368px', borderRadius: '4px', padding: '4px 10px' }}
				content={
					<div className="tag">
						{errorType ? (
							<div style={{ textAlign: 'center' }}>No Data</div>
						) : (
							<div>
                ....你的结构和信息
              </div>
						)}
					</div>
				}
				destroyTooltipOnHide
				arrowPointAtCenter
				trigger="hover"
				visible={show}
			>
				<span onMouseOver={onMouseOver} onMouseOut={onMouseOut} className="pointer person">
					{text}
				</span>
			</Popover>
		</div>
	);
};

export default UserTips;

如有不足请留言指出

最后

以上就是迅速菠萝为你收集整理的antd table组件 鼠标划过异步调取接口，展示信息的全部内容，希望文章能够帮你解决antd table组件 鼠标划过异步调取接口，展示信息所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。