美文网首页
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