vue2.0 + element-ui -渲染表格的功能demo

叁歲伎倆 2022-11-22 03:06 79阅读 0赞

对于一个新手来说，学习一个框架最重要的事情就是记录一下过程，下次再回顾的时候就很容易记住步骤了，不记得也可以直接翻出来自己之前写过的教程，几次之后也就顺手很多了，学习这个循序渐进的过程里面，笔记千万不可以少哦，下面就是我随手记录的一些笔记。

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,既然表格渲染完成了，那么接下来就要做增删改查 了。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc2MzU2OQ_size_16_color_FFFFFF_t_70_pic_center]

[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/cccf6d52f4c14080a85db74ba1e5bcd6.png
[069737bc09bc54516ebf206900c7254b.png]: /images/20221120/d398cfab90ba43f8abeeed3d14d6deff.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc2MzU2OQ_size_16_color_FFFFFF_t_70_pic_center]: /images/20221120/4c8ef65878cf446cb37dc9ec6234ecc0.png