关于前端: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": "获取数据胜利"}