买专利卖专利找龙图腾，真高效！ 查专利查商标用IPTOP,全免费！专利年费监控用IP管家,真方便！

申请/专利权人：一网互通(北京)科技有限公司

摘要：本发明实施例中提供了一种React中表格自定义设置滚动条位置的方法、装置及电子设备，属于数据处理技术领域，该方法包括：通过props接收来自父组件的数据；使用六个Grid列表组件来构建表格的不同部分；对bottomRight组件设置第一容器，所述第一容器具有overflow‑x:auto样式属性，当表格内容超出所述第一容器宽度时，在表格中显示横向滚动条；在bottomRight的第一容器旁边放置具有固定宽度第二容器；通过监听滚动事件并相应地更新第一列的位置，当bottomRight容器中的滚动条移动时，同步移动固定的第一列，以保持视觉上的一致性。本发明能够对React中表格进行灵活设置。

主权项：1.一种React中表格自定义设置滚动条位置的方法，其特征在于，包括：通过props接收来自父组件的数据，所述数据包括表格的内容以及标题信息，将接收到的数据分割成匹配不同Grid区域的分割数据，所述分割数据被Grid列表组件使用；使用六个Grid列表组件来构建表格的不同部分，所述六个Grid列表组件为：topLeft、topRight、middleLeft、middleRight、bottomLeft和bottomRight，topLeft和topRight分别表示表格的顶部左侧和顶部右侧，middleLeft和middleRight表示表格的中间部分，bottomLeft和bottomRight分别表示底部的左侧和右侧部分；对bottomRight组件设置第一容器，所述第一容器具有overflow-x:auto样式属性，当表格内容超出所述第一容器宽度时，在表格中显示横向滚动条，将bottomRight的内容从第二列开始设置，并将表格第一列固定在左边，使得当表格横向滚动时，第一列不会滚动；在bottomRight的第一容器旁边放置具有固定宽度第二容器，所述第二容器用来显示第一列的内容，所述第二容器与所述第一容器在垂直方向上对齐，所述第二容器的宽度与bottomRight中第一列的宽度相匹配；通过监听滚动事件并相应地更新第一列的位置，当bottomRight容器中的滚动条移动时，同步移动固定的第一列，以保持视觉上的一致性。

全文数据：

权利要求：

百度查询： 一网互通(北京)科技有限公司 React中表格自定义设置滚动条位置的方法、装置及电子设备