如何使用具备数据选择功能的stipple表格？

StippleUI封装的表格组件原生支持选择能力，无需额外依赖，可按以下步骤实现：

1. 导入依赖包 #

首先引入核心依赖库：

using Stipple, StippleUI, DataFrames

2. 定义响应式数据模型 #

在响应式结构体中声明三个核心变量，分别存储表格原始数据、选中结果、选择模式：

@reactive mutable struct TableModel <: ReactiveModel
    # 示例表格数据，可替换为你的实际数据集
    table_data::R{DataFrame} = DataFrame(
        id=1:5, 
        name=["项目A", "项目B", "项目C", "项目D", "项目E"], 
        value=[12, 45, 32, 67, 29]
    )
    # 存储选中的行数据，后端可直接读取该变量获取用户选择结果
    selected_rows::R{Vector{Dict}} = []
    # 选择模式：支持single（单选）、multiple（多选）、cell（单元格选择）
    selection_mode::R{String} = "multiple"
end

3. 配置带选择能力的表格组件 #

在页面UI定义中，给表格组件绑定选择相关属性即可开启选择功能：

function ui(model)
    page(model, class="p-4 container", [
        h1("可选数据表格示例")
        table(
            # 绑定表格数据源
            :table_data,
            # 开启选择功能并绑定选择模式
            selection=:selection_mode,
            # 绑定选中结果到响应式变量
            selected=:selected_rows,
            # 多选模式下开启顶部全选按钮，可选配置
            show_select_all=true,
            # 定义表格列字段
            columns=[
                Dict("name" => "id", "label" => "序号", "field" => "id"),
                Dict("name" => "name", "label" => "项目名称", "field" => "name"),
                Dict("name" => "value", "label" => "数值", "field" => "value")
            ]
        )
        # 可选：实时展示当前选中的内容，用于调试
        p(class="mt-4", "当前选中数据：", @text(:selected_rows))
    ])
end

4. 启动服务运行 #

# 初始化模型
model = TableModel |> init
# 注册路由
route("/") do
    ui(model) |> html
end
# 启动服务，默认打开浏览器预览
up(8000, open_browser=true)

常见拓展调整说明 #

• 若需要限制仅选单行，将selection_mode的默认值改为"single"即可
• 若需要单元格选择，将selection_mode改为"cell"，对应selected变量会自动存储选中单元格的坐标和数值
• 若要自定义选择触发逻辑，可给表格行插槽添加点击事件，手动修改selected_rows变量的取值即可实现自定义交互

内容的提问来源于stack exchange，提问作者Xinyu Wu