关于前端:vueelement动态表头的写法一

动静表头的写法有很多种，前端要依据后端返回的数据格式来进行调整。明天给大家展现一种只有值，没有属性的写法

<el-table max-height="600" border :data="bodyData">
   <el-table-column  v-for="(item,index) in Header" :label="item" :key="index" show-overflow-tooltip align="center" 
        :min-width="index === 0 ?'120':''" :fixed="index === 0" v-if="Header.length && Header.length>0">
        <template slot-scope="scope">
              <el-input v-if="bodyData[scope.$index].Row[index] && JSON.stringify(bodyData[scope.$index].Row[index]).indexOf('{')>-1" 
                v-model="bodyData[scope.$index].Row[index].Reason" @blur="saveData(bodyData[scope.$index].Row[index])"></el-input>
              <span v-else>{{bodyData[scope.$index].Row[index]}}</span>
        </template>
    </el-table-column>
</el-table>

export default {props: ['projectId'],
    data(){
        return {Header: [],
          bodyData:[],}
    },
    methods:{saveData(val){
        val.projectId=this.projectId;
        this.$put(`/api/plat/projects/indicDiffReason`,val, function (res) {Vue.successMsg("保留胜利！");
        })
      },
      getTableData () {this.bodyData = []
        this.Header=res.Table.Header
        this.bodyData=res.Table.Rows.map(item=>{
          item.Row=item.Row.map(ele=>{
          // 这里因为后端返回的是 JSON 数据格式，展现的时候咱们要取出对象外面的数据
            if(ele && ele.indexOf('{')>-1){ele=JSON.parse(ele)
            }
            return ele
          })
          return item
        })
      },
    },
  }

var res={
    "Data": {
        "Table": {
            "Header": [
                "指标",
                "可研版",
                "定位版",
                "差值",
                "偏差起因",
                "考核版",
                "差值",
                "偏差起因",
                "报规版",
                "差值",
                "偏差起因",
                "预测绘版",
                "差值",
                "偏差起因",
                "实测绘版",
                "差值",
                "偏差起因"
            ],
            "Rows": [
                {
                    "Row": [
                        "修建基底面积",
                        null,
                        null,
                        null,
                        "{\"IndicatorId\":\"BUILDING_AREA\",\"Reason\":null,\"Phase\":\"2\"}",
                        null,
                        null,
                        "{\"IndicatorId\":\"BUILDING_AREA\",\"Reason\":null,\"Phase\":\"3\"}",
                        null,
                        null,
                        "{\"IndicatorId\":\"BUILDING_AREA\",\"Reason\":null,\"Phase\":\"4\"}",
                        null,
                        null,
                        "{\"IndicatorId\":\"BUILDING_AREA\",\"Reason\":null,\"Phase\":\"5\"}",
                        null,
                        null,
                        "{\"IndicatorId\":\"BUILDING_AREA\",\"Reason\":null,\"Phase\":\"6\"}"
                    ]
                },
                {
                    "Row": [
                        "修建密度",
                        null,
                        null,
                        null,
                        "{\"IndicatorId\":\"CON_DENSITY\",\"Reason\":null,\"Phase\":\"2\"}",
                        null,
                        null,
                        "{\"IndicatorId\":\"CON_DENSITY\",\"Reason\":null,\"Phase\":\"3\"}",
                        null,
                        null,
                        "{\"IndicatorId\":\"CON_DENSITY\",\"Reason\":null,\"Phase\":\"4\"}",
                        null,
                        null,
                        "{\"IndicatorId\":\"CON_DENSITY\",\"Reason\":null,\"Phase\":\"5\"}",
                        null,
                        null,
                        "{\"IndicatorId\":\"CON_DENSITY\",\"Reason\":null,\"Phase\":\"6\"}"
                    ]
                }
            ]
        }
    },
    "Code": 0,
    "Message": "获取数据胜利"
}