我初始化几个，就显示几个，我现在就初始化一堆对象。始终不知道为什么
为什么图片里面数组的内容相同，但是第一个无法被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>
