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

╰+哭是因爲堅強的太久メ 2022-12-20 01:27 127阅读 0赞

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

Element UI手册：[https://cloud.tencent.com/developer/doc/1270][https_cloud.tencent.com_developer_doc_1270]  
github地址：[https://github.com/ElemeFE/element][https_github.com_ElemeFE_element]

vue2.0官方网站：[http://caibaojian.com/vue/guide/installation.html][http_caibaojian.com_vue_guide_installation.html]  
element-ui官方网站：[https://element.eleme.cn/\#/zh-CN][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
        }
    ]

![deae8183c7317aea142c68c8744a6b7c.png][]

代码

<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>
        
        </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>

渲染效果如下

![069737bc09bc54516ebf206900c7254b.png][]

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

[https_cloud.tencent.com_developer_doc_1270]: https://links.jianshu.com/go?to=https%3A%2F%2Fcloud.tencent.com%2Fdeveloper%2Fdoc%2F1270
[https_github.com_ElemeFE_element]: https://links.jianshu.com/go?to=https%3A%2F%2Fgithub.com%2FElemeFE%2Felement
[http_caibaojian.com_vue_guide_installation.html]: https://links.jianshu.com/go?to=http%3A%2F%2Fcaibaojian.com%2Fvue%2Fguide%2Finstallation.html
[https_element.eleme.cn_zh-CN]: https://links.jianshu.com/go?to=https%3A%2F%2Felement.eleme.cn%2F%23%2Fzh-CN
[deae8183c7317aea142c68c8744a6b7c.png]: /images/20221120/212092708baa46bdad9db42d6765ed48.png
[069737bc09bc54516ebf206900c7254b.png]: /images/20221120/394f07464b444033b486a3c9136613bc.png