返回介绍

209.online基础篇-JS增强-列表

发布于 2020-09-14 22:20:41 字数 5367 浏览 1697 评论 0 收藏 0

1.功能简述 通过定义list的增强JS,实现原智能表单未实现的功能

2.操作描述 输入图片说明 输入图片说明

3.定义规则

  • js增强方法定义:不要使用function test(){}的形式 ,一律使用funname(){}的形式
  • js增强方法名规范:方法名唯一,且需要和自定义按钮的buttonCode保持一致或是和以下列表中的编码值保持一致
编码(方法名)描述
beforeAdd在新增之前调用,后续扩展after方法
beforeEdit在编辑之前调用,该方法可以携带一个参数row,表示当前记录,后续扩展after方法
beforeDelete在删除之前调用,该方法可以携带一个参数row,表示当前记录,后续扩展after方法
mounted在对应页面vue钩子函数mounted中调用
created在对应页面vue钩子函数created中调用
  • js增强关键字:在任意方法内,可使用that关键字,该关键字指向当前页面的vue实例,那就意味着可以用that调用任何当前页面的实例方法/属性,如加载数据that.loadData(),获取查询对象that.queryParam或是that.getQueryParams()等等。
  • js增强中发起后台请求: 和前端开发保持一致,使用postAction,getAction,deleteAction(参考下例)
  • 备注:什么情况下定义的js增强方法会携带参数row?js增强最终还是挂载在按钮上或是挂在vue钩子函数中,我们列表按钮按按钮样式划分有两种,一种在列表上方,一种在列表操作列下,在操作列下的按钮,其对应的方法都会携带一个参数row,指向当前行记录

4.示例(js增强中发起后台请求

  • 4-1.后台定义请求方法
    输入图片说明
  • 4-2.定义js增强(此处是直接在created中发起了一个请求)
    输入图片说明
  • 4-3.进入页面测试效果如下:
    输入图片说明 后台也接收到参数
    输入图片说明

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文