// data数据就是websocket实时传输的数据,每500ms全量更新次
const data = useSelector((state) => state.websocket.data);
useEffect(() => {
if (data) {
setItemsSource(data);
}
}, [data]);
// 对数据做下处理,并分组
const tableData = new CollectionView(handleInitialData(itemsSource),
{
groupDescriptions: ["ExchangeID", "ObjectCode", "DateCode"],
sortDescriptions: ["ExchangeID", "ObjectCode", "DateCode"],
})
// 表格渲染
<MultiRow
style={{ height: "100vh", width: "100%" }}
itemsSource={tableData}
groupHeaderFormat={'<b>{value}</b>:{count:n0} 条'}
layoutDefinition={[...]}
/>
// 我当下的代码逻辑是这样,不知道为什么tableData的变化会引起MultiRow表格的重新渲染
// 导致现在表格拉长某列宽度会立刻还原;点击某个单元格,选中的项会立刻回到顶部;选择某列隐藏后立刻又还原
|