el-table-column动态循环渲染列项名称/label值

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>

好了，已经完成了基本需求，如果有更好的实现方式的小伙伴可以随时分享哟，嘿嘿~~~^_^