vue2.0 + element-ui 实战项目-渲染表格（四）

自从用饿了么框架重构项目以来，遇到很多问题，我都有一一记录下来，现在特喜欢这个框架，说实话，如果你是用了vue这个技术栈的话，一定要用饿了么的pc端框架哦，遇到问题的时候在网上百度一下，就能找到解决方案，还有很多社区可以讨论，社区文档都比较成熟，很容易上手~~

Element UI手册：https://cloud.tencent.com/developer/doc/1270
github地址：https://github.com/ElemeFE/element

vue2.0官方网站：http://caibaojian.com/vue/guide/installation.html
element-ui官方网站：https://element.eleme.cn/#/zh-CN

返回的json数据

[
    {
        "id": 45,
        "placeId": "12",
        "buildingId": 1254,
        "floorId": "1",
        "leftLowerLon": 23.98,
        "leftLowerLat": 12.23,
        "rightUpperLon": 45.55,
        "rightUpperLat": 34.67,
        "rotationAngle": 45.23,
        "scaling": 12.44
    },
    {
        "id": 46,
        "placeId": "",
        "buildingId": 0,
        "floorId": "",
        "leftLowerLon": 22.0,
        "leftLowerLat": 0.0,
        "rightUpperLon": 0.0,
        "rightUpperLat": 0.0,
        "rotationAngle": 0.0,
        "scaling": 0.0
    },
    {
        "id": 47,
        "placeId": "12",
        "buildingId": 234,
        "floorId": "12",
        "leftLowerLon": 34.0,
        "leftLowerLat": 23.0,
        "rightUpperLon": 23.0,
        "rightUpperLat": 34.0,
        "rotationAngle": 45.0,
        "scaling": 90.0
    }
]

代码

<template>
    <div id="app">
      <el-table :data="pvData" border fit highlight-current-row style="width: 100%;" class="tb-edit">
      <el-table-column label="场景ID" prop="placeId" width="180"></el-table-column>
      <el-table-column label="建筑物ID" prop="buildingId" width="110px" align="center"></el-table-column>
      <el-table-column label="楼层ID" prop="floorId" width="110px" align="center"></el-table-column>
      <el-table-column label="经度(左下)" prop="leftLowerLon" width="110px" align="center"></el-table-column>
      <el-table-column label="纬度(左下)" prop="leftLowerLat" width="110px" align="center"></el-table-column>
      <el-table-column label="经度(右上)" prop="rightUpperLon" width="110px" align="center"></el-table-column>
      <el-table-column label="纬度(右上)" prop="rightUpperLat" width="110px" align="center"></el-table-column>
     <el-table-column label="旋转角度" prop="rotationAngle" width="110px" align="center"></el-table-column>
     <el-table-column label="缩放比例" prop="scaling" width="110px" align="center"></el-table-column>
      <!-- <el-table-column label="操作" align="center" width="230" class-name="small-padding fixed-width">
        <template slot-scope="{ row, $index }">
          <el-button type="primary" size="mini" @click="handleUpdate(row)">编辑</el-button>
          <el-button
            v-if="row.status != 'deleted'"
            size="mini"
            type="danger"
            @click="handleDelete($index, row)"
          >删除</el-button>
        </template>
      </el-table-column> -->
    </el-table>
    
    </div>
</template>
<script>
    import axios from "axios";
    export default {
        name: "app",
        data() {
            return {              
                 pvData: [],
            }
        },
        mounted() {
            this.getData();
        },
        methods: {
            getData() {
                axios.get('/api/ConfigServer/picture.action').then(response => {
                    console.log(response.data);
                    this.pvData = response.data;
                }, response => {
                    console.log("error");
                });
            }
        }
    }
</script>

渲染效果如下

ok,既然表格渲染完成了，那么接下来就要做增删改查了。

最后编辑于：2020.11.05 13:47:35