Vue通过getAction的finally来最大程度避免影响主数据呈现问题

 更新时间:2020年04月24日 08:19:18   作者:buguge  
这篇文章主要介绍了Vue通过getAction的finally来最大程度避免影响主数据呈现,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

企业信息列表,查看某条记录时,弹窗页里要求展示企业的用户名,而用户名字段不在企业表里。

为此,我们需要修改弹窗页的渲染方法。

methods: {

 enterpriseInfo (record) {
  this.form.resetFields();
  let product;
  if(record.product == 'HUICHUXING'){
   product = '惠出行';
  }else if(record.product == 'BOSSKG'){
   product = 'BOSS开工';
  }else if(record.product == 'HUICHUXING,BOSSKG' || record.product == 'BOSSKG,HUICHUXING'){
   product = '惠出行,BOSS开工';
  }else{
   product = '业务未开通';
  }
  this.model = Object.assign({}, record);
  this.model.product = product;
  this.visible = true;
  this.$nextTick(() => {
   this.form.setFieldsValue(pick(this.model,'enterpriseName','address','legalName','email','phone','userName','licensePic',
    'ipList','taxpayerNo','billAddress','bankName','bankCardNo','billPhone','product'));
  });
 }
}

我的想法很清晰,recoord代表的是指定的企业的信息,在this.visible = true;前,给this.model.userName属性重新赋值。

服务端接口很快实现了。不过,修改这个vue页面的时候倒是吃力了。对于Jeecg-boot 的这套前段UI框架Ant Design Jeecg Vue,虽然已经跟了几个项目了,依然是一知半解。

自然是通过getAction来赋值了,然并卵。因为getAction是异步请求,所以,肯定是不起作用了。

那么,该怎么办呢?

一个小伙给出了方案,当然,这也是我不得已而为之的方案————在getAction请求成功的方法里,给userName赋值,然后,再进行页面渲染。

methods: {

 enterpriseInfo (record) {
  ......
  this.visible = true;
  getAction('/ent/getEnterpriseLoginAcc?enterpriseId=' + record.enterpriseId).then(response => {
   record.userName = response.result.loginAcc;
   this.model = Object.assign({}, record);
   this.$nextTick(() => {
    this.form.setFieldsValue(pick(this.model, 'enterpriseName', 'address', 'legalName', 'email', 'phone', 'userName', 'licensePic', 'taxpayerNo', 'billAddress', 'bankName', 'bankCardNo', 'billPhone', 'product', 'industryType1', 'industryType2'));
   });
  });
  
 }
}

这样虽然实现了,但与我的想法有些不一致。怎么讲?假如说,执行getAction出问题,那么整个页面将无法呈现。这岂不因小失大!

后来,问一个前端的同事,终于指点了迷津。 同事发的如下这个示意图,提示可在1处、2处做文章。

当然,经过尝试,发现类似getAction\postAction\putAction除了.then()、.catch()外,还有finally()。那看来,在没有其他方案的情况下,————也许没有其他方案了————这是最好的方案了,也符合我的期望。

methods: {

 enterpriseInfo (record) {
  ......
  this.visible = true;
  this.$nextTick(() => {
   getAction('/ent/getEnterpriseLoginAcc?enterpriseId='+record.enterpriseId).then(res => {
    if(res.success) {
     this.model.userName = res.result.loginAcc;
    }
   }).finally(() => {
    // console.log("userName= "+this.model.userName)
    this.form.setFieldsValue(pick(this.model,'enterpriseName','address','legalName','email','phone','userName','licensePic',
     'ipList','taxpayerNo','billAddress','bankName','bankCardNo','billPhone','product','industryType1','industryType2'));

   });

  });
  
 }
}

到此这篇关于Vue通过getAction的finally来最大程度避免影响主数据呈现的文章就介绍到这了,更多相关vue getAction finally内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • Vue 3 中动态赋值 ref 的应用示例解析

    Vue 3 中动态赋值 ref 的应用示例解析

    Vue3引入了Composition API,其中ref是核心概念,允许开发者声明响应式状态,本文通过一个具体示例,探讨了在Vue3中如何使用ref进行动态赋值,尤其是在处理DOM相关操作时的应用,通过ref动态赋值,可以有效管理组件内的状态,提高代码的可维护性和清晰度
    2024-09-09
  • 解决vue接口数据赋值给data没有反应的问题

    解决vue接口数据赋值给data没有反应的问题

    今天小编就为大家分享一篇解决vue接口数据赋值给data没有反应的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-08-08
  • vue-router 手势滑动触发返回功能

    vue-router 手势滑动触发返回功能

    这篇文章主要介绍了vue-router 手势滑动触发返回功能,文中通过实例代码给大家介绍了vue图片左右滑动及手势缩放,需要的朋友可以参考下
    2018-09-09
  • Vue.Draggable使用文档超详细总结

    Vue.Draggable使用文档超详细总结

    Vue拖拽组件(Draggable)是一个允许与View-Model同步进行拖放排序的Vue组件,下面这篇文章主要给大家介绍了关于Vue.Draggable使用文档的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-08-08
  • vue之原生上传图片加水印并压缩图片大小方式

    vue之原生上传图片加水印并压缩图片大小方式

    文章介绍了如何使用Vue原生上传图片,并在图片上添加水印并压缩图片大小,首先,安装了相应的插件并进行封装,然后,介绍了添加水印的方法和上传图片的过程,最后,作者分享了自己的经验,并希望对大家有所帮助
    2025-01-01
  • Vue项目启动提示Cannot GET /问题

    Vue项目启动提示Cannot GET /问题

    这篇文章主要介绍了Vue项目启动提示Cannot GET /问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • VUE+ElementUI下载文件的几种方式(小结)

    VUE+ElementUI下载文件的几种方式(小结)

    本文主要介绍了VUE+ElementUI下载文件的几种方式(小结),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-01-01
  • vue开发自定义的全局公共组件详解

    vue开发自定义的全局公共组件详解

    本文介绍了如何开发自定义全局公共组件的两种方法,第一种方法是通过在components文件夹中创建新的组件文件夹,例如Loading文件夹,并在其中创建index.js和index.vue文件,通过在vue的入口文件main.js中进行引入,可以实现组件的全局调用
    2024-10-10
  • vue2的todolist入门小项目的详细解析

    vue2的todolist入门小项目的详细解析

    本篇文章主要介绍了vue2的todolist入门小项目的详细解析,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-05-05
  • 解析vue.config.js文件使用

    解析vue.config.js文件使用

    这篇文章主要介绍了vue.config.js文件使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-07-07

最新评论