antd Design Table组件中，整行触发悬浮

   由于最近的需求，要求开发出一个table行触发悬浮提示框展示信息的功能，类似这样：

 

 鼠标放入这一行，然后展示一个悬浮窗，展示本行的数据。

但是，我们都知道antd的Table组件，是一列一列的设定样式和属性进行调整的（column这个API），无法像column一样固定一整行的设定样式和属性。特别是触发悬浮窗，

一般都是这样，给某一列特定字段加上悬浮，显示表格中被省略的内容。这种只能由某行某个字段触发 ，无法行悬浮内容。所以在这里跟大家分享一下，利用Popver,Table行悬浮：

    state={

        show:false,

        data:{},

    }

    Info(show,data){

        console.log(show)

        return <Popover title='详情' overlayClassName={`suspend_popver`} visible={show}

        mouseEnterDelay={0}

        mouseLeaveDelay={0}

        content={<>

            <div>test：{data.test}</div>

        </>}>{''}</Popover>

    }

    render() {

        const { show, data } = this.state;

        return <React.Fragment>

            <Table

            onRow={(v, i) => {

                return {

                    onMouseEnter: event => {

                        event.stopPropagation;

                        this.setState({show:true,data:v})

                    },

                    onMouseMove: event => {

                        event.stopPropagation;

                        const popver = document.getElementsByClassName(`suspend_popver`);

                        if (popver.length > 0) {

                            (popver.item(0) as HTMLElement).style.left = event.clientX - 80 + 'px' ;

                            (popver.item(0) as HTMLElement).style.top = event.clientY + 50 + 'px' ;

                        }

                    },

                    onMouseLeave: event => {

                        event.stopPropagation;

                        this.setState({show:false,data:v})

                    },

                };

            }}

            dataSource={[{test:555555}]}

            columns={[

                {dataIndex:'test',title:'test'}

            ]}

            />

            {this.Info(show, data)}

        </React.Fragment>

    }

 代码如上，然后效果图如下：

鼠标移动到每一行的时候，就会触发悬浮提示，并且提示可以随着鼠标的移动而移动。

如果只需要表格行触发悬浮，而不需要随鼠标移动的话也可以也可以这样写。

 state={

        dataSource:[{test:555555,popoverShow:false}]

    }

    render() {

        const { dataSource } = this.state;

        return <React.Fragment>

            <Table

            onRow={(v, i) => {

                return {

                    onMouseEnter: event => {

                        event.stopPropagation;

                        let newDataSource = []

                        dataSource.map(i=>{

                            i.popoverShow = true

                            newDataSource.push({...i})

                        })

                        this.setState({dataSource:newDataSource})

                    },

                    onMouseLeave: event => {

                        event.stopPropagation;

                        let newDataSource = []

                        dataSource.map(i=>{

                            i.popoverShow = false

                            newDataSource.push({...i})

                        })

                        this.setState({dataSource:newDataSource})

                    },

                };

            }}

            dataSource={dataSource}

            columns={[

                {title:'', dataIndex:'popoverShow', width:0, render: (v,o,i)=>{

                          return <Popover title='详情' visible={v} placement="topLeft"

                               content={<>

                                     <div>test：{o.test}</div>

                               </>}

                           ><div style={{height:30}}></div></Popover>

                }},

                {dataIndex:'test',title:'test'}

            ]}

            />

 

利用一个宽度为 0 的 列生成悬浮窗，用一个字段作为悬浮框的开关，就可以实现整行触发了。

这里注意一下，悬浮提示随鼠标移动时不要设置的离鼠标太近，和鼠标最好留一点距离，如果鼠标移动就能碰到悬浮框的话，那么很可能触发 鼠标移入移出事件 导致悬浮框的不停隐藏，出现切换。这里的 鼠标移入移出事件 只对行有效，悬浮框不属于表格行的部分，鼠标从行内移出但刚好进入悬浮框，就会移出事件，悬浮框关闭，悬浮框关闭后鼠标又在行内，又触发事件，就会不停闪动。