<el-table :data="stationmonitorList" border style="width: 100%;color: white" highlight-current-row height="280" :header-cell-style="{background:'transparent',color:'#ffffff','text-align':'center'}" @row-click="onclick"> <el-table-column prop="position" label="类型" align="left"> </el-table-column> <el-table-column prop="num" label="数值" align="center"> </el-table-column> </el-table>
data(){
return {
// 数据结果先弄好,一会动态赋值就按照这个结构赋值
stationmonitorList: [ { position: '下沉系数', num: 3 }, { position: '高跨比', num: 2 }, { position: '采空区体积', num: 4 }, { position: '采空区埋深', num: 2 } ],
// 因为后台取出的是数据库字段和对应的值,并不是字段含义汉字,这里对应数据库
names: { sinking: '下沉系数', height: '高跨比', volume: '采空区体积', burial: '采空区埋深', rock: '岩体结构', rqd: 'RQD/%', strength: '岩石抗压强度', geological: '地质构造', damage: '损伤区体积', plastic: '塑性区体积', blasting: '爆破质点运动速度', stress: '应力pa', strain: '应变mm', },
}
}
methods: { // 调用接口(我这个有传值,可以根据自己业务写) ,下图是后台返回的结果集
getKongQuData(id1,id2){ let self = this; self.$axios.post(article + '/admin/mineKongqu/getMineKongquData? id1='+id1+'&id2='+id2).then((res) => { var temp = res.data.data; const keys = Object.keys(temp); const value = Object.values(temp); const newData = keys.map((item,index)=>({ position:this.names[item], num:value[index] })) this.stationmonitorList = newData; }) },
}
最终做到了想要的结果: