当前位置: 首页 > Web前端 > HTML

vue+element动态表头怎么写(一)

时间:2023-04-02 12:08:21 HTML

动态头的写法有很多种,前端需要根据后端返回的数据格式进行调整。今天给大家介绍一种只有值没有属性的写法0">-1"v-model="bodyData[scope.$index].Row[index].原因"@blur="saveData(bodyData[scope.$index].Row[index])">{{bodyData[scope.$index].Row[index]}}exportdefault{props:['projectId'],data(){return{Header:[],bodyData:[],}},方法:{saveData(val){val.projectId=this.projectId;this.$put(`/api/plat/projects/indicDiffReason`,val,function(res){Vue.successMsg("保存成功!");})},getTableData(){this.bodyData=[]this.Header=res.Table.Headerthis.bodyData=res.Table.Rows.map(item=>{item.Row=item.Row.map(ele=>{//这里因为后端返回的是JSON数据格式,我们显示时需要取出对象中的数据if(ele&&ele.indexOf('{')>-1){ele=JSON.parse(ele)}returnele})returnitem})},},}varres={"数据":{"表格":{"表头":["指标","研究版","定位版","差异","偏离原因","评估版","差异","偏差原因","申报版本","差异","偏差原因","预测图","差异","偏差原因","实测图","差异","偏差原因"],"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\",\"原因\":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\",\"原因\":null,\"Phase\":\"5\"}",null,null,"{\"IndicatorId\":\"CON_DENSITY\",\"原因\":null,\"相位\":\"6\"}"]}]}},"Code":0,"Message":"获取数据成功"}

最新推荐
猜你喜欢