el-table 不能正常显示数据 初始化几个对象，就显示几个收到的数据

Question

我初始化几个，就显示几个，我现在就初始化一堆对象。始终不知道为什么

为什么图片里面数组的内容相同，但是第一个无法被el-table识别，
这两个数组对象的区别在哪，
谢谢大佬帮帮忙
el-table不能正常用

如图所示，我的数据一共有五条

但是现在只能显示三条
后端返回的数据如下

{
    "history": [
        {
            "id": "26",
            "questionMaster": 1,
            "correctedNum": 0,
            "disCorrectedNum": 20
        },
        {
            "id": "27",
            "questionMaster": 1,
            "correctedNum": 0,
            "disCorrectedNum": 20
        },
        {
            "id": "28",
            "questionMaster": 1,
            "correctedNum": 0,
            "disCorrectedNum": 20
        },
        {
            "id": "29",
            "questionMaster": 1,
            "correctedNum": 0,
            "disCorrectedNum": 20
        },
        {
            "id": "30",
            "questionMaster": 1,
            "correctedNum": 0,
            "disCorrectedNum": 20
        }
    ]
}

页面代码如下

<template>
  <div class="zhu">
    <el-container class="zhu">
      <el-aside>
         <div style="width: 200px">
           <el-menu
             class="el-menu-vertical-demo"
             @select="handleSelect"
             background-color="#545c64"
             text-color="#fff"
             active-text-color="#ffd04b"
             style="height: 640px">
             <el-menu-item index="1">
               <span slot="title">自我测试</span>
             </el-menu-item>
             <el-menu-item index="2">
               <span slot="title">历史答题</span>
             </el-menu-item>
             <el-menu-item index="3">
               <span slot="title">个人信息</span>
             </el-menu-item>
             <el-menu-item index="4">
               <span slot="title">关于</span>
             </el-menu-item>
             <el-menu-item index="5">
               <span slot="title">刷新</span>
             </el-menu-item>
           </el-menu>
         </div>
      </el-aside>
      <el-main>
        <el-row v-show="showProblem">
          <el-col :span="24">
            <el-button v-for="o in 20" :key="o" style="margin-left: 10px;width: 100px;margin-top: 5px" v-on:click="getIndex(o)">{{o}}</el-button>
          </el-col>
          <el-col>
            <el-card class="box-card" >
              <div slot="header" class="clearfix">
                <span>{{objectProblems[index].objectpro_id}}.{{objectProblems[index].objectpro_com}}</span>
              </div>
              <el-row>
                <el-radio-group v-model="radio[index]">
                  <el-row>
                    <el-radio label="A">{{objectProblems[index].objectpro_A}}</el-radio>
                  </el-row>
                  <el-row style="margin-top: 15px">
                    <el-radio label="B">{{objectProblems[index].objectpro_B}}</el-radio>
                  </el-row>
                  <el-row style="margin-top: 15px">
                  <el-radio label="C">{{objectProblems[index].objectpro_C}}</el-radio>
                </el-row>
                  <el-row style="margin-top: 15px">
                  <el-radio label="D">{{objectProblems[index].objectpro_D}}</el-radio>
                </el-row>
                </el-radio-group>
              </el-row>
            </el-card>
          </el-col>
          <el-col :span="24" style="margin-top: 20px" v-show="commitShow()">
            <el-button v-on:click="commitAnswer()" style="margin-left: 450px">提交</el-button>
          </el-col>
        </el-row>
        <el-row v-show="showAnswer">
          <el-table
            :data="tableData"
            style="width: 1000px">
            <el-table-column
              prop="name"
              label="姓名"
              width="180">
            </el-table-column>
            <el-table-column
              prop="id"
              label="学号">
            </el-table-column>
            <el-table-column
              prop="CorrectedNum"
              label="正确个数">
            </el-table-column>
            <el-table-column
              prop="DisCorrectedNum"
              label="错误个数">
            </el-table-column>
            <el-table-column
              prop="grade"
              label="成绩">
            </el-table-column>
          </el-table>
        </el-row>
        <el-row v-show="showHistory">
          <el-table
            :data="tableDataHistory"
            style="width: 1000px" stripe>
            <el-table-column
              prop="name"
              label="姓名"
              width="180px">
            </el-table-column>
            <el-table-column
              prop="id"
              label="学号">
            </el-table-column>
            <el-table-column
              prop="CorrectedNum"
              label="正确个数">
            </el-table-column>
            <el-table-column
              prop="DisCorrectedNum"
              label="错误个数">
            </el-table-column>
            <el-table-column
              prop="grade"
              label="成绩">
            </el-table-column>
          </el-table>
        </el-row>
      </el-main>
    </el-container>
  </div>
</template>

<script>



export default {
  inject:['reload'],
  name: 'AppIndex',
  components: {
  },
  data(){
    return{
      tableData:[
        {
          name:this.$store.getters.getUserName,
          id:this.$store.getters.getUserId,
          CorrectedNum:0,
          DisCorrectedNum:0,
          grade:0,
        }
      ],
      tableDataHistory:[
        {
          name:"",
          id:"",
          CorrectedNum:0,
          DisCorrectedNum:0,
          grade:0,
        },
        {
          name:"",
          id:"",
          CorrectedNum:0,
          DisCorrectedNum:0,
          grade:0,
        },
        {
          name:"",
          id:"",
          CorrectedNum:0,
          DisCorrectedNum:0,
          grade:0,
        }
      ],
      objectProblems:[
        {
          objectpro_id: 1,
          objectpro_com: "标志着中国新民主主义革命开端的历史事件是( )。",
          objectpro_A: "新文化运动",
          objectpro_B: "五四运动",
          objectpro_C: "中国共产党成立",
          objectpro_D: "五卅运动",
          objectpro_ans: "B"
        }
      ],
      radio:[20],
      showProblem:false,
      showHistory:false,
      showPerson:false,
      showAbout:false,
      showAnswer:false,
      index:0,
    }
  },
  created() {

  },
  methods:{
    getIndex:function (key){
          this.index = key - 1
    },
    commitShow:function (){
        if(this.index==19){
          return true;
        }
        else return false;
    },
    commitAnswer:function (){
        this.showProblem = false;
        this.showAnswer = true;
        this.markPapers();
    },
    handleSelect(key, keyPath) {
      if(key==1){
        this.initData();
        this.showProblem = true
        this.showHistory=false
          this.showPerson=false
          this.showAbout=false
        this.getObject()
      }
      else if(key==2){
        this.showProblem = false
        this.showHistory=true
        this.showPerson=false
        this.showAbout=false
        this.showAnswer=false
        this.getHistory()

      }
      else if(key==3){
        this.showProblem = false
        this.showHistory=false
        this.showPerson=true
        this.showAbout=false
      }
      else if(key==4){
        this.showProblem = false
        this.showHistory=false
        this.showPerson=false
        this.showAbout=true
      }
      else{
        this.reload();
      }
    },
    markPapers:function (){
      for(let i=0;i<20;i++){
        if(this.radio[i]==this.objectProblems[i].objectpro_ans){
          this.tableData[0].CorrectedNum++;
        }
        else{
          this.tableData[0].DisCorrectedNum++;
        }
      }
      this.tableData[0].grade = this.tableData[0].CorrectedNum*5;
      this.$axios.post('/insertGrade',{
        id:this.$store.getters.getUserId,
        questionMaster:1,
        CorrectedNum:this.tableData[0].CorrectedNum,
        DisCorrectedNum:this.tableData[0].DisCorrectedNum,
      }).then(res => {

      }).catch(failResponse => {
      })
    },
    getObject:function (){
      this.$axios.get('/getAllObjPro'
      ).then(res => {
          this.objectProblems = res.data.objectproblems
        }
      ).catch(failResponse => {
      })
    },
    getHistory:function(){
      //get传递参数
      this.$axios.get('/getHistory',{
        params:{
          id:this.$store.getters.getUserId
        }
      }).then(res => {
        if(res.data.history.length==0){
          this.tableDataHistory = null;
        }else{
          this.tableDataHistory.length = res.data.history.length;
          for(let i=0;i<res.data.history.length;i++){
            this.tableDataHistory[i].id = this.$store.getters.getUserId;
            this.tableDataHistory[i].name = this.$store.getters.getUserName;
            this.tableDataHistory[i].CorrectedNum = res.data.history[i].correctedNum;
            this.tableDataHistory[i].DisCorrectedNum = res.data.history[i].disCorrectedNum;
            this.tableDataHistory[i].grade = this.tableDataHistory[i].CorrectedNum *5;
          }
        }
        console.log("表格数组的大小"+this.tableDataHistory.length);
        console.log("后台数组的大小"+res.data.history.length);

      }).catch(
        failResponse => {}
      )
    },
    initData(){
      this.showAnswer = false;
      this.tableData[0].CorrectedNum = 0;
      this.tableData[0].grade = 0;
      this.tableData[0].CorrectedNum = 0;
      this.tableData[0].DisCorrectedNum = 0;
      this.index=0;
      for(let i=0;i<20;i++){
        this.radio[i]="null";
      }
    }
  }
}
</script>

<style scoped>
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both
}

.box-card {
  margin-left: 200px;
  margin-top: 80px;
  width: 580px;
}
.zhu{
  height:640px;
  background: #F2F2F2;
  box-shadow: 10px 10px 5px #888888;
}
</style>

Answer 1

看你打印出来的内容，很像内容没有被观测，然后这种就找赋值的地方。你看这个位置就有问题呀。数组不应该是push嘛。。。而且你居然还有 null 的操作。如果持续使用，如果前面触发了length 为 0，那么后面就不能继续使用了。