需求
表格数据调用列表接口
,需要多传一个 Type
字段,而Type字段的值 需要从跳转页面Url
上面获取到,并赋值给Type
,再传入列表接口
中,最后拿到表格数据并展示
遇到的问题
需求很简单,但是因为表格使用的是统一封装的crud组件
,而列表接口是会在一进页面就自动触发
的,此时,页面还没有完全加载完成,还没有拿到Url地址上的参数值,就调取了列表接口,导致表格数据错误
解决办法
1.该页面不使用 统一封装的表格组件,单独写。
(这个是最笨的方法,也是比较简单的),但是牵扯到各种基本操作的按钮以及查询,分页,修改起来工作量较大,修改比较大(不推荐
)
2.页面调用两遍接口,第一遍一进来就触发这个不做处理,第二遍 是在获取到参数值后
,在mounted()
中再调用一次列表接口,将参数传进去
mounted() {
this.crud.query.type = this.$route.params.groupId;
this.crud.toQuery();
},
嗯,该方法也可以实现效果,但是,很容易造成表格数据赋值混乱(不推荐
)
3.(!!!推荐
) 使用 Curd.js
自带参数 queryOnPresenterCreated(禁止初始化时自动查询)
去修改
3.1 在 cruds() 方法里 设置 queryOnPresenterCreated
为false,禁止初始化时自动查询,而后,等待页面加载完成后,在 mounted()
方法中 编写赋值调用逻辑
mounted() {
const groupId = this.$route.params.groupId;
this.$nextTick(() => {
if (this.crud && groupId) {
this.crud.query.type = groupId;
this.crud.toQuery();
}
});
},