使用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
网友评论