Vue错误04:表格渲染某条“组合数据”失败

问题描述

今天在做管理系统项目的时候,遇到一个奇怪的问题。我的组合数据不显示:
效果图01:
效果图01
控制台打印的数据如下:
调试图01:
调试图01
正如图上所示,数据是打印出来了,但是表格没有渲染。

问题分析

我的数据表分为两个:
student–储存现有学生信息表(导入的资源,只可修改用于标注是否被注册的状态栏register)
user–储存当前系统用户表(包括管理员在内)。下面是部分数据展示:
学生信息表
用户表
所以我需要展示的tableData是一个组合数据,正如调试图01,所示。需要从两张表依次查询。我的做法是下面这样的:

//初始化列表
    showInfo() {
      //当页面被加载,发送请求,获取表单数据
      //第一次请求,获取当前用户表信息
      this.axios.post(this.base_url + "/home/info", {//回调函数1
        tableName: 'user'
      }).then((res) => {
        console.log("res:",res.data);
        //第二次请求,查询学生信息表,将名称整合到表格数据
        let temp = [];//用于暂存数据
        for(let i=0;i<res.data.length;i++){
          //当用户学号信息不为空,则发送请求
          if(res.data[i].studentId!=null){
            this.axios.post(this.base_url+"/home/search",{//回调函数2
              tableName:'student',data:{studentId:res.data[i].studentId}})
            .then((response)=>{
              console.log(response);
              let obj = {};//用于暂存每条数据对象
              obj = res.data[i];
              obj.name = response.data[0].name;//组合数据
              temp[i] = obj;
            })
          }else{
            temp[i] = res.data[i];
          }
          if(i==res.data.length-1){
            this.tableData = temp;//处理完成后,给tableData赋值
          }
        }
      }).catch((err) => {
        if (err) throw err
      });
    },

问题解决

由于JavaScript的运行机制(参照:JavaScript-运行机制详解),回调函数会被放在任务队列,最后执行。这也是为什么—调试图01—的tableData会有empty*12。应该把判断和赋值都放在–回调函数2–里面。附上代码:

 //初始化列表
    showInfo() {
      //当页面被加载,发送请求,获取表单数据
      //第一次请求,获取当前用户表信息
      this.axios.post(this.base_url + "/home/info", {
        tableName: 'user'
      }).then((res) => {
        console.log("res:",res.data);
        //第二次请求,查询学生信息表,将名称整合到表格数据
        let temp = [];
        for(let i=0;i<res.data.length;i++){
            this.axios.post(this.base_url+"/home/search",{
              tableName:'student',data:{studentId:res.data[i].studentId}})//当学生账号为空时,查询到的结果也是空
            .then((response)=>{
              console.log(response);
              let obj = {};
              obj = res.data[i];
              if(response.data.length==0){
                obj.name = ''
              }else{
                obj.name = response.data[0].name;
              }temp[i] = obj;
              if(i==res.data.length-1){
                console.log("temp:",temp);
                this.tableData = temp;
                console.log("tableData:",this.tableData);
              }
            })
        }
      }).catch((err) => {
        if (err) throw err
      });
    },

后台的运行结果:
调试图02:
调试图02

前台浏览器调试:
调试图03:
调试图03
完美解决问题!
效果图02:
效果图02
总结:
请各位一定记住JavaScript的运行机制是单线程!所有的回调函数都会被放在任务队列,在主函数运行完后,再执行!
请各位一定记住JavaScript的运行机制是单线程!所有的回调函数都会被放在任务队列,在主函数运行完后,再执行!
请各位一定记住JavaScript的运行机制是单线程!所有的回调函数都会被放在任务队列,在主函数运行完后,再执行!

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值