【功能演示】如何给包含 URL 的表格每行添加 “查看” 按钮,实现点击按钮跳转到对应 URL 页面?
1 天前

在数据可视化与交互开发场景中,为含 URL 的表格每行配置查看按钮并实现点击跳转,是提升页面交互性与数据实用性的常见需求。本文将详细讲解如何为表格每行添加查看按钮,并实现点击按钮跳转至对应 URL 页面的完整实现思路与操作步骤,帮助开发者快速落地这一实用功能。


1.在左侧组件库添加“基础数据表格”组件至项目中。


接着勾选含有URL数据至数据表格中。


2.选中基础数据表格,在右侧“样式”配置面板中,调整“内容列”“列宽”“字体”样式,使数据展示更清晰、便于查看。


接着选择操作列,调整其“列宽”“字体”样式,并对“操作项列表”进行美化设置。此处可将操作项模拟为按钮样式展示,以提升界面美观度;由于数据表格不支持直接添加按钮组件,该方式可在不使用组件的前提下实现等效视觉效果。


3.在左上角点击“项目”,选择“项目设置”,即可添加“项目参数”,通过 URL 的参数传递的方式修改项目参数。


4.选择基础数据表格,在右侧配置栏中,添加“交互”,触发“点击操作按钮”事件,执行“空动作”,此操作旨在通过触发交互获取结果,步骤简洁易上手。


接着在右下角,点击“调试面板”,选择“系统信息输出”即可查看对应参数信息。


5.继续添加交互,触发“点击操作按钮”事件,执行“修改项目参数”动作,选择上述添加的参数名称,点击标识,将其修改为“自定义公式”,这里的公式参考如下:{:payload.row.网页},详细使用方法可以参考此教程:动态值传递(交互) - 项目制作 - 数字孪生开发教程-可视化大屏制作教程 - 山海鲸可视化


6.继续添加“交互”,触发“点击操作按钮”事件,执行“打开链接”动作,打开方式为“在新标签打开”,此处的链接对应上文已配置的项目参数。


展示效果如下:

朝乐 朝乐

登录一下,更多精彩内容等你发现,贡献精彩回答,参与评论互动

登录! 还没有账号?去注册

评论0

暂无评论

咨询热线0571-88650917
地址 公司 邮箱

杭州市文一西路海创科技中心 311121

杭州多算科技有限公司

support@shanhaibi.com

关注山海鯨官方qq群,了解更多内容

QQ群号:788095444

Copyright © 2020-2026 多算科技, All Rights Reserved. 浙ICP备20006837号-5