fac基于表格行展开实现内部信息实时懒加载

展示效果

代码

import time
import uuid
import dash
from dash import html
from datetime import datetime
import feffery_antd_components as fac
import feffery_utils_components as fuc
from feffery_dash_utils.style_utils import style
from dash.dependencies import Input, Output, MATCH

app = dash.Dash(__name__)

app.layout = html.Div(
    [
        fac.AntdTable(
            columns=[
                {"title": f"字段{i}", "dataIndex": f"字段{i}", "width": 400}
                for i in range(5)
            ],
            data=[
                {**{f"字段{j}": i for j in range(5)}, "key": f"row-{i}"}
                for i in range(10)
            ],
            bordered=True,
            expandedRowKeyToContent=[
                {
                    "key": f"row-{i}",
                    "content": fuc.FefferyInViewport(
                        fac.AntdSkeleton(
                            html.Div(
                                id={"type": "lazy-load-container", "index": i},
                                # style=style(minHeight=100),
                            ),
                            active=True,
                        ),
                        id={"type": "lazy-load-detect", "index": i},
                    ),
                }
                for i in range(0, 10, 2)
            ],
        )
    ],
    style=style(padding=50),
)


@app.callback(
    Output({"type": "lazy-load-container", "index": MATCH}, "children"),
    Input({"type": "lazy-load-detect", "index": MATCH}, "inViewport"),
    prevent_initial_call=True,
)
def real_time_load_data(in_viewport):
    if in_viewport:
        # 模拟实时计算耗时
        time.sleep(1)

        return fac.AntdAlert(
            message=f"示例实时加载数据：{str(uuid.uuid4())}",
            showIcon=True,
            type="info",
            description="本地数据加载时间："
            + datetime.now().strftime("%Y-%m-%d %H:%M:%S"),
        )


if __name__ == "__main__":
    app.run(debug=True)