事件操作
一些组件有事件属性可以配置,比如按钮有点击事件,表单容器有提交完成事件,多选框组有值切换事件等。事件的触发方式不同,但是可以配置的逻辑是相同的。
操作类型
1. 接口操作
接口操作用于向后端发起请求。点击接口操作之后可以选择自己设计的后端逻辑,事件触发后会向配置的后端接口发起请求。
用法举例:点击按钮使表单容器提交数据
如下图,将按钮设置点击事件,绑定后端逻辑的新增接口。接口的参数绑定表单容器中对应组件的值,即可实现点击按钮提交数据。
2. 组件操作
组件操作顾名思义,是对页面上的组件进行操作。不同组件支持的操作不同:
- 表格容器组件支持加载、移除数据等操作
- 按钮组件可触发点击事件
- 文本输入框可进行赋值操作
- 对话框、抽屉等组件可配置打开或关闭事件
用法举例:点击按钮让表格加载刚刚请求的数据
例如,在学生成绩管理系统中,表格默认加载成绩大于 60 分的学生。你希望点击按钮后,再加载成绩低于 60 分的学生数据。
如下图,在按钮的点击事件中配置了两个动作:
- 向后端发请求获取成绩低于 60 分的学生数据
- 将获取到的数据赋值给表格容器
3. 框架操作
框架操作用于处理页面之间的跳转或页面的重新加载。支持以下四种方式:
- 新窗口打开:在浏览器新建一个标签页打开指定页面
- 当前窗口打开:在当前页面加载指定页面,会覆盖当前内容
- 返回 / 关闭:返回上一个访问的页面,需要有路由记录
- 更新页面数据:刷新当前访问的页面内容
用法举例:点击表格容器中的添加按钮,跳转到新增数据页面
如下图,在表格容器的右上角配置了一个按钮,点击后将在当前窗口打开页面 BookAdd
,用于新增数据。这种做法在后台管理系统中非常常见。