美文网首页
vue element-ui el-table渲染数据的转化处理

vue element-ui el-table渲染数据的转化处理

作者: 羊绘霖 | 来源:发表于2019-10-31 16:19 被阅读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]))
}

相关文章

网友评论

      本文标题:vue element-ui el-table渲染数据的转化处理

      本文链接:https://www.haomeiwen.com/subject/yvstbctx.html