项目中需要使用的表格数据结构是下图所示
但是找了elementUI中的表格发现并没有自己需要的
数据结构并不相同,于是做了一下改造,因为后台并不会传一个单独的表格数据,所以methods中定义了一个init()方法,在init()中改造数据结构,然后created调用方法,
1.样式结构
<div style="width:550px;">
<el-table
:data="tableData"
style="width: 100%"
:border="true"
:header-cell-style="{'text-align':'center','background-color':'#f5f5f6'}"
:cell-style="{'text-align': 'center' }"
size="mini"
>
<el-table-column prop="type" label="类别" width="80"></el-table-column>
<el-table-column prop="single" label="单选题">
<template slot-scope="scope">
<span v-text="scope.row.single"></span>
</template>
</el-table-column>
<el-table-column prop="multiple" label="多选题">
<template slot-scope="scope">
<span v-text="scope.row.multiple"></span>
</template>
</el-table-column>
<el-table-column prop="judge" label="判断题">
<template slot-scope="scope">
<span v-text="scope.row.judge"></span>
</template>
</el-table-column>
<el-table-column prop="blank" label="填空题">
<template slot-scope="scope">
<span v-text="scope.row.blank"></span>
</template>
</el-table-column>
<el-table-column prop="question" label="问答题">
<template slot-scope="scope">
<span v-text="scope.row.question"></span>
</template>
</el-table-column>
</el-table>
</div>
2.模拟数据
<script>
export default {
data() {
return {
paper: {
singleCount: "45",
multipleCount: "30",
judgeCount: "25",
singleScore: "1",
multipleScore: "1",
judgeScore: "1",
scores: "100"
},
tableData: [{ type: "题数" }, { type: "分/题" }, { type: "总分" }]
};
},
methods: {
init() {
this.tableData[0].single = this.paper.singleCount
? this.paper.singleCount
: "-";
this.tableData[1].single = this.paper.singleScore
? this.paper.singleScore + "分/题"
: "-";
this.tableData[2].single = this.paper.singleScore
? this.paper.singleScore * this.paper.singleCount
: "-";
this.tableData[0].multiple = this.paper.multipleCount
? this.paper.multipleCount
: "-";
this.tableData[1].multiple = this.paper.multipleScore
? this.paper.multipleScore + "分/题"
: "-";
this.tableData[2].multiple = this.paper.multipleScore
? this.paper.multipleScore * this.paper.multipleCount
: "-";
this.tableData[0].judge = this.paper.judgeCount
? this.paper.judgeCount
: "-";
this.tableData[1].judge = this.paper.judgeScore
? this.paper.judgeScore + "分/题"
: "-";
this.tableData[2].judge = this.paper.judgeScore
? this.paper.judgeScore * this.paper.judgeCount
: "-";
this.tableData[0].blank = this.paper.blankCount
? this.paper.blankCount
: "-";
this.tableData[1].blank = this.paper.blankScore
? this.paper.blankScore + "分/题"
: "-";
this.tableData[2].blank = this.paper.blankScore
? this.paper.blankScore * this.paper.blankCount
: "-";
this.tableData[0].question = this.paper.questionCount
? this.paper.questionCount
: "-";
this.tableData[1].question = this.paper.questionScore
? this.paper.questionScore + "分/题"
: "-";
this.tableData[2].question = this.paper.questionScore
? this.paper.questionScore * this.paper.questionCount
: "-";
// console.log(this.tableData);
}
},
created() {
this.init();
}
};
这样就可以了