element tab表格 竖向显示

<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;
            })
        },
}

最终做到了想要的结果:

 

  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值