vue element-ui el-table渲染数据的转化处理
2019-10-31 本文已影响0人
羊绘霖
原始数据:
// 表头返回的数据格式
let tableHead = [{"label":"代号","prop":"key1","width":"200"},{"label":"名称","prop":"key2","width":"200"},{"label":"联系人","prop":"key3","width":"200"},{"label":"职位","prop":"key4","width":"200"},{"label":"电话","prop":"key5","width":"200"},{"label":"邮编","prop":"key6","width":"200"},{"label":"地址","prop":"key7","width":"200"}]
// 表身返回的数据格式
let tableBody = [{"id":"537","key1":"30126","key2":"华荣","key3":" ","key4":" ","key5":" ","key6":" ","key7":"是"},{"id":"537","key1":"30126","key2":"华荣","key3":" ","key4":" ","key5":" ","key6":" ","key7":"是"},{"id":"537","key1":"30126","key2":"华荣","key3":" ","key4":" ","key5":" ","key6":" ","key7":"是"}]
导出excel时需要将数据转化成以下格式:
let head = ["代号", "名称", "联系", "职位", "电话", "邮编", "地址"]
let body = [["537", "30126", "华荣", "", "", "是"], ["537", "30126", "华荣", "", "", "是"], ["537", "30126", "华荣", "", "", "是"]]
转化方法如下:
getdata(){
const label = []
const prop = []
tableHead.forEach((item) => {
label.push(item.label)
prop.push(item.prop)
})
const filterVal = prop
const list = tableBody
const data = this.formatJson(filterVal, list)
console.log(data)
}
formatJson(filterVal, jsonData){
return jsonData.map((v) => filterVal.map((j) => v[j]))
}