antd的table实现鼠标移到某一行显示操作列的操作按钮

最新推荐文章于 2023-03-16 16:12:14 发布

youlinaixu

最新推荐文章于 2023-03-16 16:12:14 发布

阅读量8.9k

点赞数 2

分类专栏： react的antd的table鼠标移入事件的操作 react 文章标签： antd table row鼠标移入操作

本文链接：https://blog.csdn.net/youlinaixu/article/details/100544866

版权

本文介绍如何利用antd的Table组件，在鼠标移入某一行时动态显示操作列的按钮，通过控制行类名的opacity实现交互效果。

摘要由CSDN通过智能技术生成

实现效果如下：
在这里插入图片描述
代码实现：

rowKey一定
<Table
                rowSelection={rowSelection}
                rowKey='id'
                onRow={this.onRow}
                rowClassName={this.setClassName}
                columns={columns}
                dataSource={data} />
// 鼠标移入每一行的事件
    onRow = (row, index) => {
        return {
            onMouseEnter: event => {
                const { dispatch } = this.props;
                dispatch ({
                    type: 'projectManage/upState',
                    payload: {
                        hoverIndex: index
                    },
                });
            },
            onMouseLeave: event => {
                const { dispatch } = this.props;
                dispatch ({
                    type: 'projectMana