实现思路(基于react hook 实现)
- 定义一个state 值,记录当前鼠标移入行的索引
- 操作列使用 colume 的 render 属性自定义渲染内容,但是要给列宽,否则内容的显示隐藏会导致表格抖动,渲染内容通过对比本行索引(index)与 state 记录的索引,动态设置内容className
- 通过Table 的 onRow 属性,通过回调方法得到当前鼠标移入行的索引,并更新state
别墨迹,快上代码吧
import React, { memo, useCallback, useState } from 'react';
import { Table } from 'antd';
const dataSource = [
{
key: '1',
name: '胡彦斌',
age: 32,
address: '西湖区湖底公园1号',
},
{
key: '2',
name: '胡彦祖',
age: 42,
address: '西湖区湖底公园1号',
},
];
const TestTableOnShow = () => {
const [rowActiveIndex, setRowActiveIndex] = useState(null);
const columns = [
{
title: '姓名',
dataIndex: 'name