vue,element-ui中el-table实现动态列,列数根据接口返回


solt="header"是为了插入表头的,这里遍历listStudent[0],是因为表头都一样,所以取第一行数据的字段做为表头即可

<template>
  <div>
    <el-table :data="listStudent">
      <el-table-column label="id" prop="id"></el-table-column>
      <el-table-column label="studentName" prop="studentName"></el-table-column>
      <!-- solt="header"是为了插入表头的,这里遍历listStudent[0],是因为表头都一样,所以取第一行数据的字段做为表头即可 -->
      <el-table-column v-for="(item, index) in listStudent[0].answerList" :key="index">
        <template slot="header">
          第{{item.num}}题
        </template>
        <!-- index对应下面动态列(answerList)的索引,取出值渲染 -->
        <template slot-scope="scope">{{scope.row.answerList[index].answer}}</template>
      </el-table-column>
    </el-table>
  </div>
</template>

这里的listStudent下的answerList为动态列

<script>
  export default {
    data() {
      return {
        listStudent: [{
          id: 1,
          studentName: 'zhangsan',
          answerList: [{
              num: '1',
              answer: 'A'
            },
            {
              num: '2',
              answer: 'B'
            },
            {
              num: '3',
              answer: 'C'
            },
          ]
        },
        {
          id: 2,
          studentName: 'lisi',
          answerList: [{
              num: '1',
              answer: 'C'
            },
            {
              num: '2',
              answer: 'B'
            },
            {
              num: '3',
              answer: 'C'
            },
          ]
        }]
      }
    }
  }

</script>

在这里插入图片描述

Logo

前往低代码交流专区

更多推荐