美文网首页
react-table滚动到指定行位置

react-table滚动到指定行位置

作者: 青衣梦舞 | 来源:发表于2019-11-06 11:43 被阅读0次

    使用React-table进行表格数据和地图的联动展示,其中用户提出需要根据当前选中的要素表格中也要自动滚动到属性表位置。
    方法:
    (1)使用scroll-into-view组件进行滚动方法的实现
    https://www.npmjs.com/package/scroll-into-view

    handleScroll = () => {
    scrollIntoView(document.querySelector('.scroll-row'));
    };
    (2)使用React-table getTrProps属性对选中要素进行滚动触发
    https://www.npmjs.com/package/react-table
    getTrProps={(state, rowInfo, column) => {
    if (rowInfo.original.labelField === highlightGraphic.attributes[labelField]) {
    this.handleScroll();

                            }
                            return {
                              onClick: (e, t) => {
                                this.onRowClick(e, t, rowInfo);
                              },
                              style: {
                                background: highlightGraphic !== null ? rowInfo.original.labelField === highlightGraphic.attributes[labelField] ? '#458BE7' : null : null,
                              },
                              className:rowInfo.original.labelField === highlightGraphic.attributes[labelField] ? 'scroll-row' : '' 
                            };
                          }}
    

    效果如下:


    image.png

    相关文章

      网友评论

          本文标题:react-table滚动到指定行位置

          本文链接:https://www.haomeiwen.com/subject/eiqubctx.html