在el-table中遇到一个有意思的数据处理，以下数据表头为动态的数据


此数据表头处理比较简单，难点在于表头对应的数据，当后端返回的数据只有部分时，如只有温度就返回温度，只有PM2.5就只返回PM2.5,而且后端没有返回其他没有的字段的默认值，此时我们就需要对数据进行处理对应好数据所在的位置不然则会出现PM2.5的值跑到了温度下面

<el-table>
	<el-table-column align="center" label="序号" type="index">
	</el-table-column>
	<el-table-column align="center" label="时间" prop="time">
	</el-table-column>
	<!-- 此处就是动态表头的处理 -->
	<el-table-column
	    align="center"
	    :label="item.attr_name"
	    v-for="(item, index) in deviceTypeInfo.attributes"
	    :key="item.id"
	>
	    <template slot-scope="scope">
	        <span>{{
	            scope.row.value[index]
	                ? scope.row.value[index].value
	                : " "
	        }}</span>
	    </template>
	 </el-table-column>
 </el-table>

对数据的处理如下

let data = Object.keys(res.data.data).map((key) => {
     return { time: key, value: res.data.data[key] };
	});
let newData = JSON.parse(JSON.stringify(data));
//此处微数据处理
newData.map((items, value) => {
     let attrArr = [];
     items.value.map((item) => {
         let indexAttr =
             this.deviceTypeInfo.attributes.findIndex((indexItem) =>
             	item.attribute.attr === indexItem.attr
         );
         //根据数据对应的deviceTypeInfo.attributes数组的下标进行数据处理
         attrArr[indexAttr] = item;
     });
     //将处理过的items.value重新赋值 此时数据则会对应到表头的所对应的位置
     items.value = JSON.parse(JSON.stringify(attrArr));
 });
  this.valueList = newData;
  this.total = res.data.total;