element tab表格竖向显示

矿山空区监测数据展示

最新推荐文章于 2024-08-23 17:08:04 发布

原创最新推荐文章于 2024-08-23 17:08:04 发布 · 3.1k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #elementui #javascript

本文介绍了一种使用Element UI库中的表格组件来展示矿山空区监测数据的方法。通过后台接口获取数据，并将数据库字段映射为易于理解的中文名称进行展示。实现了动态更新表格内容的功能。

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

最终做到了想要的结果：