如何在页面第一次加载时,让 getDataList 使用查询条件(人人专业版)

提问 已结 1 82
jclazz
jclazz VIP3 2019-01-25
悬赏:20积分
版本:renren-security 2.1 浏览器:
我的想法是在这个入口页面打开后,先去后台取出项目名称,并使用第一个项目作为默认查询条件,然后根据项目名称取出相关的数据。现在的问题是: 页面加载时,取数据的方法(getDataList)并没有使用使用这个过滤条件,人工点击查询按钮是则可以。我需要怎么做才能达到预期的效果呢? 如图,页面加载时项目列表已经取出了,默认查询项目也设置成功了。 img[//cdn.renren.io/0fa78201901251012596389.PNG] [hr] 相关代码 [pre] methods: { init () { this.$nextTick(() => { Promise.all([ this.getProjectList() ]).then(() => { if (this.projectList.length > 0) { this.dataForm.projectId = this.projectList[0].id } }) }) }, // 获取项目列表 getProjectList () { return this.$http.get('/worktime/project/my-projects').then(({ data: res }) => { if (res.code !== 0) { return this.$message.error(res.msg) } this.projectList = res.data }).catch(() => {}) } }, created () { this.init() } [/pre]
回帖
  • 1. 项目中tabs使用了vue的keep-alive组件缓存,所以每次选择(打开)tab时,触发的钩子应该使用activated 而不是created。 2. 同时为每个list组件页面封装了一个mixins做为共用代码,默认选择(打开)tab时,触发activated钩子并调用getDataList方法,具体可查看src/mixins/view-module.js文件。 3. 提供取消2项中提到的这个默认钩子调用方法,可在组件页面中的mixinViewModuleOptions属性中将activatedIsNeed: false设置为false。这样就不会触发默认处理。然后您就可以在组件页面中编写你的init方法,再通过activated钩子调用即可。 注意:按照您上述提供代码,如果需要先获取项目列表再查询列表。那么应该 [pre] if (this.projectList.length > 0) { this.dataForm.projectId = this.projectList[0].id // 这里调用getDataList方法,甚至加上this.$nextTick方法包裹。 } [/pre]
    1
本帖已结贴