vue elementUI table表格自定义表头，按照表头顺序展示表格

自定义表头，按照表头顺序展示
在接收到后台返回的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
          }
        }
      })
    },
  }
}