vue+element动态表头的写法（一）

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

<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": "获取数据成功"
}