el-table实现动态列,列数根据接口返回
vue,element-ui中el-table实现动态列,列数根据接口返回solt="header"是为了插入表头的,这里遍历listStudent[0],是因为表头都一样,所以取第一行数据的字段做为表头即可<template><div><el-table :data="listStudent"><el-table-column label="id" pr
·
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>
更多推荐
已为社区贡献3条内容
所有评论(0)