react-table滚动到指定行位置

2019-11-06  本文已影响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
上一篇下一篇

猜你喜欢

热点阅读