自定义表头,按照表头顺序展示
在接收到后台返回的excel表格内容(表头和表数据对应不上)被打乱,按照Excel表格内容顺序展示数据
<el-table :data="tableData" stripe border style="width: 100%;height:700px;">
<el-table-column v-for="(item, index) in heads" :key="index" :label="item.header">
<template #default="scope">
{{ tableData[scope.$index][index].body }}
</template>
</el-table-column>
</el-table>
<script>
export default {
data() {
return {
tableData: [],
heads: [],
body: []
}
},
mounted() {
this.tableList()
},
methods: {
tableList() {
const params = {
id: this.$route.params.id
}
getSuppliersFilesDetail(this.$route.params.id, params).then(res => {
//表头数据转json字符串用逗号分割成数组
const headerparams = JSON.stringify(res.data.file_fields).split(',')
//[0: "{\"A\":\"日期\"",
//1: "\"B\":\"型号\""
//2: "\"C\":\"品名\""
//3: "\"D\":\"油漆编号\""
//4: "\"E\":\"S-样品编号\""
//5: "\"F\":\"S-巡检时间\""
//6: "\"G\":\"S-L\""
//7: "\"H\":\"S-a\""
//8: "\"I\":\"S-b\""
//9: "\"J\":\"S-△E\""
//10: "\"K\":\"A-样品编号\""
//11: "\"L\":\"A-巡检时间\""
//12: "\"M\":\"A-L\""
//13: "\"N\":\"A-a\""
//14: "\"O\":\"A-b\""
//15: "\"P\":\"A-△E\"}"]
const headerArr = []
headerparams.forEach(item => {
//console.log(item.split(':')) 输出:["{\"A\"", "\"日期\""]
headerArr.push({ header: JSON.parse(item.split(':')[1].replace('}', '')), body: '' })
})
//表头数据
this.heads = headerArr
//获取body数据
res.data.file_values.forEach((item, index) => {
const bodyparams = JSON.stringify(item).split(',')
console.log(bodyparams)
const b_table = []
bodyparams.forEach(ele => {
const headerp = ele.split(':')
const bodys = headerp.slice(1).join(',').replace('}', '')
if (JSON.parse(headerp[0].replace('{', '')) !== 'fid') {//移除head带有fid字段的对象
b_table.push({ b_head: JSON.parse(headerp[0].replace('{', '')), b_body: JSON.parse(bodys), index: '' })
}
})
this.body[index] = b_table
})
//处理body数据和header数据对应
this.body.forEach((ele, index) => {
ele.forEach((t, i) => {
this.heads.forEach((item, c) => {
if (t.b_head === item.header) {
t.index = item.index
}
})
})
ele.sort(compare('index'))// 排序
})
this.tableData = this.body
// 排序
function compare(property) {
return function(a, b) {
var value1 = a[property]
var value2 = b[property]
return value1 - value2// 升序,降序为value2 - value1
}
}
})
},
}
}