el-table展示报表，动态列匹配数据

先上一张效果图和接口返回的数据结构。
如果接口返回数据结构正常的话很好展示，无奈后台接口返回的比较奇怪，不能直接拿来用，所以记录一下。

下面是table部分的代码
除了第一列，其他列是从数组里循环出来的，为的是用到nano属性，可以匹配到后面经过处理后的数据项进行展示。
其实很好理解，主要我这里加了判断是不是要显示tip，忽略掉就可以了。

<!-- table -->
      <el-table v-loading="loading" :data="labelList" class="resultTable">
        <el-table-column :label="title" align="center">
          <el-table-column  align="center" prop="name" label="项目\类别">
            <template slot-scope="scope">
              {{ scope.row.name }}
            </template>
          </el-table-column>
          <el-table-column align="center" v-for="item in titleName" :key="item.index" :prop="item.nano" :label="item.name">
            <template slot-scope="scope">
              <span v-if="(scope.row.name == '病名' || scope.row.name == '发病区划') && scope.row[item.nano]">
                <el-popover v-if="scope.row[item.nano].length > 17" width="400" trigger="hover" placement="top">
                  <p>{{ scope.row[item.nano] }}</p>
                  <div slot="reference" class="name-wrapper">
                    <span>{{ scope.row[item.nano] }}</span>
                  </div>
                </el-popover>
                <span v-if="scope.row[item.nano].length <= 17">{{ scope.row[item.nano] }}</span>
              </span>
              <span v-else>{{ scope.row.name == '病名数量' ? scope.row[item.nano] + '种' : scope.row[item.nano] }}</span>
            </template>
          </el-table-column>
        </el-table-column>
      </el-table>

这是data部分。
lableList是为了下面接收到数据以后把数据重组。

     titleName:[
        {name:'一类病', nano: 'one'},
        {name:'二类病', nano: 'two'},
        {name:'三类病', nano: 'three'},
        {name:'其他病', nano: 'other'}
      ],
      labelList: [
        {
          name: '病名数量',
          label: 'diseaseCount'
        },
        {
          name: '病名',
          label: 'diseaseName'
        },
        {
          name: '发病区划',
          label: 'province'
        },
        {
          name: '县数',
          label: 'countyCount'
        },
        {
          name: '县次数',
          label: 'countyCountNum'
        },
        {
          name: '新发疫点数',
          label: 'newFieldCount'
        },
        {
          name: '总疫点数',
          label: 'fieldCount'
        },
        {
          name: '养殖环节 / 屠宰环节 / 流通环节 / 其他',
          label: 'fieldTypeCount'
        },
        {
          name: '易感动物数',
          label: 'ygdws'
        },
        {
          name: '发病数',
          label: 'fbs'
        },
        {
          name: '发病率（%）',
          label: 'fbl'
        },
        {
          name: '病死数',
          label: 'bss'
        },
        {
          name: '病死率（%）',
          label: 'bsl'
        },
        {
          name: '急宰数',
          label: 'jzs'
        },
        {
          name: '扑杀数',
          label: 'pss'
        },
        {
          name: '无害化处理数',
          label: 'whhcls'
        },
        {
          name: '紧急免疫数',
          label: 'jjmys'
        },
        {
          name: '治疗数',
          label: 'zls'
        }
      ],

这是方法部分。
很简单的处理，看看就明白了。

    getList(data) {
      this.loading = true;
      reportThree(data).then(res => {
        if(res.code == 200) {
          this.title = res.data.title
          this.labelList.map(e=>{
            this.$set(e,'one',res.data.one[e.label])
            this.$set(e,'two',res.data.two[e.label])
            this.$set(e,'three',res.data.three[e.label])
            this.$set(e,'other',res.data.other[e.label])
          })
          this.total = this.labelList.length
          this.loading = false;
        }
      });
    },

最后上一个经过处理打印出来的数据结构