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

实现效果如下:
antd的table实现鼠标移到某一行显示操作列的操作按钮_第1张图片
代码实现:

rowKey一定

// 鼠标移入每一行的事件
    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: 'projectManage/upState',
                    payload: {
                        hoverIndex: -1
                    },
                });
            }
        }
    }
   //添加类名
    setClassName = (record, index) => {
        const { projectManage } = this.props;
        const { hoverIndex } = projectManage;
        return index === hoverIndex ? styles.rowActive : "";
    }

控制类名的opacity为0或1来控制,最后就达到了产品需要的效果,真的是难为人啊
antd的table实现鼠标移到某一行显示操作列的操作按钮_第2张图片

你可能感兴趣的:(react)