最近遇到一个问题,就是关于如何根据后台返回的数据,动态增加表头,关于这个问题,官方文档也没找到相关的案例。后面就自己想了个方法,现在拿出来跟大家分享一下~
一般情况下,表格的数据是后台返回一个数组,然后通过prop绑定相应的属性渲染整个页面,现在有一种情况是后台返回一个数组,里面有一部分表头的属性是直接可以渲染,还有一部分表头是数组。具体的格式大致如下:
data() {
return: {
tabe:[
{id : '1', name: '222', list:[
{选择1: 'a'},
{选择6: 'b'},
{选择2: 'e'}
]},
{id : '2', name: '555', list:[
{选择1: 'a'},
{选择2: 'c'}
]}
]
}
}
复制代码
其中list里面的属性是不确定的,可能有5个,可能只有1个。
思路: 对于这种格式的数据渲染表格,我们可以将固定的表头和动态增加的表头分为两部分,然后循环整个表头。
data() {
// 固定的表头
this.tableHead = [{
name: '问题内容',
prop: 'questionName'
}, {
name: '类型',
prop: 'type'
}, {
name: '正确选项',
prop: 'correctAnswer'
}, {
name: '正确率',
prop: 'correctRate'
}, {
name: '抽取次数',
prop: 'etlTime'
}]
}
复制代码
主题部分:先要对后台返回的数据格式进行相关的处理。
this.tableHead = [{
name: '问题内容',
prop: 'questionName'
}, {
name: '类型',
prop: 'type'
}, {
name: '正确选项',
prop: 'correctAnswer'
}, {
name: '正确率',
prop: 'correctRate'
}, {
name: '抽取次数',
prop: 'etlTime'
}]
const selectArr = []
this.tableData = []
res.data.list.forEach((value, index) => { // res.data.list 是后台返回的数据,结构跟最上面的是一样的
const obj = {}
selectArr.push(value.choiceNum)
Object.keys(value).forEach((key) => {
if (key === 'choiceList') { // choiceList是list里面的一个数组
value[key].forEach((value1, index1) => {
Object.keys(value1).forEach((key1) => { // 重新组装choiceList里面的数据
obj[`choice${index1 + 1}`] = key1
obj[`rate${index1 + 1}`] = value1[key1]
})
})
}
})
this.tableData.push(obj) // 将组装好的数据放入tableData里面
})
const maxNum = selectArr.sort((a, b) => { // 对动态增加的表头进行排序 1-10
const r = b - a
return r
})[0]
for (let i = 0; i < maxNum; i++) {
this.tableHead.push({ //动态增加的表头属性值
name: `选项${i + 1}`,
prop: `choice${i + 1}`
}, {
name: '选择率',
prop: `rate${i + 1}`
})
}
复制代码
页面部分:
<el-table
:data="tableData"
border
highlight-current-row
:header-cell-style="{textAlign:'center',background:'#F8F8F9',color: '#333'}"
:cell-style="{textAlign:'center'}"
style="width: 100%;text-align:center">
<el-table-column type="index"
width="50"
label="序号">
</el-table-column>
<template v-for="(item, index) in tableHead">
<el-table-column
:label="item.name"
:key="index">
<template slot-scope="scope">
{{ scope.row[item.prop] ? scope.row[item.prop] : '-' }}
</template>
</el-table-column>
</template>
</el-table>
复制代码
效果如下图所示:
注:写的比较简单,如果大家有好的建议可以直接给我留言!