ANTD-TABLE表格字段明细展示

表格字段明细展示，属于比较小的需求，但是也有一定交互细节，本文选取部分场景。

1、字段渲染

• render和渲染组件是有区别的。
• render常见为函数转化，利用页面和全局的变量state来渲染，最终返回Dom结构，偏向于展示和数据处理。函数参数和原来一致。
• 渲染组件提供了自己的状态，有利于该字段的交互逻辑集中在组件中，尽量少利用外部变量。注意函数参数的变化，由props引入。
• 命名方式略有不同，函数驼峰即可，组件大写字母开头+驼峰。

import { Table } from "antd";
import React, { useState } from "react";const RenderNameCom = ({ text }) => {const [loading, setLoading] = useState(false);return (<divonClick={() => {setLoading(true);setTimeout(() => {setLoading(false);}, 2000);}}>{loading ? "Loading..." : text}</div>);
};const renderNameFun = (text) => {const textLast = text > 10 ? "..." : text;return <div>{textLast}</div>;
};export const columns = [{title: "Name",dataIndex: "name",render: (text) => <RenderNameCom text={text} />,},{title: "Age",dataIndex: "age",render: renderNameFun,},
];const testPage = () => {return (<Table columns={columns} dataSource={[{ name: "John Doe", age: 32 }]} />);
};export default testPage;

2、异步请求展示明细

• click点击比较常见，单次点击也比较保守和稳定，配合disabled（或者loading）保证同一时间不在接受触发事件。
• 获取展开状态visible（新版本使用open属性），可以进行灵活判断，不再进行触发请求。
• 如果没有disabled禁用，可能连续点击触发多次。

import { Table } from "antd";
import React, { useState } from "react";
import { Button, Popover, Spin, Divider } from "antd";const delay = (ms) => new Promise((resolve) => setTimeout(resolve, ms));const RenderNameCom = ({ text }) => {const [show, setShow] = useState(false);const [loading, setLoading] = useState(false);const [data, setData] = useState({width: 0,height: 0,top: 0,left: 0,});const onClick = async () => {// 当未展开时，点击可以发起请求；展开后，默认会关闭，阻止多余请求if (show) {return;}try {setLoading(true);await delay(2000);setData({width: 100,height: 100,top: 100,left: 100,});console.log("clicked");setLoading(false);} catch (error) {console.log(error);setLoading(false);}};return (<Popovercontent={loading ? (<Spin />) : (<div><p>Name: {text}</p><Divider /><p>Width: {data?.width}</p><p>Height: {data?.height}</p><p>Top: {data?.top}</p><p>Left: {data?.left}</p></div>)}trigger="click"visible={show}onVisibleChange={(visible) => setShow(visible)}><Button type="link" onClick={onClick} disabled={loading}>{text}</Button></Popover>);
};export const columns = [{title: "Name",dataIndex: "name",render: (text) => <RenderNameCom text={text} />,},
];const testPage = () => {return (<Table columns={columns} dataSource={[{ name: "John Doe", age: 32 }]} />);
};export default testPage;

3、hover展示问题

3.1 基本逻辑

• 用click的基础代码，改为hover触发基本完成任务
• 问题在于hover存在鼠标滑过频率很快的问题，误触发概率很大。

import { Table } from "antd";
import React, { useState } from "react";
import { Button, Popover, Spin, Divider } from "antd";const delay = (ms) => new Promise((resolve) => setTimeout(resolve, ms));const RenderNameCom = ({ text }) => {const [show, setShow] = useState(false);const [loading, setLoading] = useState(false);const [data, setData] = useState({width: 0,height: 0,top: 0,left: 0,});const onClick = async () => {console.log("clicked start");if (show) {return;}try {setLoading(true);await delay(2000);setData({width: 100,height: 100,top: 100,left: 100,});console.log("clicked");setLoading(false);} catch (error) {console.log(error);setLoading(false);}};return (<Popovercontent={loading ? (<Spin />) : (<div><p>Name: {text}</p><Divider /><p>Width: {data?.width}</p><p>Height: {data?.height}</p><p>Top: {data?.top}</p><p>Left: {data?.left}</p></div>)}trigger="hover"visible={show}onVisibleChange={(visible) => setShow(visible)}><Button type="link" onMouseEnter={onClick} disabled={loading}>{text}</Button></Popover>);
};export const columns = [{title: "Name",dataIndex: "name",render: (text) => <RenderNameCom text={text} />,},
];const testPage = () => {return (<Tablestyle={{ paddingTop: "100px" }}columns={columns}dataSource={[{ name: "John Doe", age: 32 }]}/>);
};export default testPage;

3.2 hover时长判断

判断鼠标hover时长，决定是否触发事件；基础代码模拟。

const HoverTimer = () => {const [loading, setLoading] = useState(false);const timer = useRef(null);const onMouseEnter = async () => {timer.current = setTimeout(async () => {try {setLoading(true);await delay(2000);console.log("clicked");setLoading(false);} catch (error) {console.log(error);setLoading(false);}}, 1000);};const onMouseLeave = () => {if (timer.current) {clearTimeout(timer.current);}};return (<Buttontype="link"onMouseEnter={onMouseEnter}onMouseLeave={onMouseLeave}loading={loading}>Hover me</Button>);
};

3.3 render+hover

• hover会自动展开和关闭，可以不再设置show的状态。
• 注意hover刚开始，定时器未执行，利用defaultData的初始状态进行设置loading

import { Table } from "antd";
import React, { useState, useRef } from "react";
import { Button, Popover, Spin, Divider } from "antd";const delay = (ms) => new Promise((resolve) => setTimeout(resolve, ms));const RenderNameCom = ({ text }) => {const [loading, setLoading] = useState(false);const defaultData = {width: 0,height: 0,top: 0,left: 0,};const [data, setData] = useState(defaultData);const timer = useRef(null);const onMouseEnter = async () => {console.log("clicked start");setData(defaultData); // 同步清空timer.current = setTimeout(async () => {try {setLoading(true);await delay(2000);setData({width: 100,height: 100,top: 100,left: 100,});console.log("clicked");setLoading(false);} catch (error) {console.log(error);setLoading(false);}}, 1000);};const onMouseLeave = () => {if (timer.current) {clearTimeout(timer.current);}};return (<Popovercontent={loading || data?.width === 0 ? (<Spin />) : (<div><p>Name: {text}</p><Divider /><p>Width: {data?.width}</p><p>Height: {data?.height}</p><p>Top: {data?.top}</p><p>Left: {data?.left}</p></div>)}trigger="hover"><Buttontype="link"onMouseEnter={onMouseEnter}onMouseLeave={onMouseLeave}disabled={loading}>{text}</Button></Popover>);
};export const columns = [{title: "Name",dataIndex: "name",render: (text) => <RenderNameCom text={text} />,},
];const testPage = () => {return (<div><Tablestyle={{ paddingTop: "100px" }}columns={columns}dataSource={[{ name: "John Doe", age: 32 }]}/></div>);
};export default testPage;