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>

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

  • 21
    点赞
  • 45
    收藏
    觉得还不错? 一键收藏
  • 6
    评论
评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值