1.业务需求:
用户根据不同学院>专业>班级查询学生列表,但是el-table的label的名称和数量需要根据搜索条件进行动态渲染,显示效果如下图所示
2.数据格式:
2.1:自定义需要动态循环的label名称数组(根据搜索条件赋值)
//课程分数表格动态循环label列项
tableOption: [
{label: '英语口语1'},
{label: '英语笔译2'},
{label: '英语写作3'},
{label: '英语口译4'},
{label: '英语口语5'},
{label: '英语笔译6'},
],
2.2:自定义每个label名称下的每个学生对象对应的分数值
// 课程分数表格数据--score的值
courseList: [
{
id:'666',
studentId:'2020111601',
pro:'英语专业',
class:'1班级',
tableOption: [
{score: '86'},
{score: '91'},
{score: '92'},
{score: '89'},
{score: '80'},
{score: '94'},
],
schoolYear:'2020~20121学年第一学期'
},
{
id:'888',
studentId:'2020111602',
pro:'英语专业',
class:'1班级',
tableOption: [
{score: '91'},
{score: '92'},
{score: '86'},
{score: '93'},
{score: '89'},
{score: '92'},
],
schoolYear:'2020~20121学年第一学期'
}
],
3.HTML页面展示:
使用的elementUI的table组件
<el-table :data="this.courseList" border >
<el-table-column label="id" align="center" prop="id" />
<el-table-column label="学生id" align="center" prop="studentId"/>
<el-table-column
v-for="(item, index) in tableOption"
:key="index"
:label="item.label"
align="center">
<template slot-scope="scope">
<span>{{scope.row.tableOption[index].score}}</span>
</template>
</el-table-column>
<el-table-column label="学年" align="center" prop="schoolYear" width="200"/>
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<template slot-scope="scope">
<el-button size="small" type="text" style="color: darkorange;font-size: 18px;">
<i class="el-icon-edit-outline"></i>
</el-button>
<el-button type="text" size="small" style="color: red;font-size: 18px;">
<i class="el-icon-delete"></i>
</el-button>
</template>
</el-table-column>
</el-table>
好了,已经完成了基本需求,如果有更好的实现方式的小伙伴可以随时分享哟,嘿嘿~~~^_^