自从用饿了么框架重构项目以来，遇到 很多问题，我都有一一记录下来，现在特喜欢这个框架，说实话，如果你是用了vue这个技术栈的话，一定要用饿了么的pc端框架哦，遇到问题的时候在网上百度一下，就能找到解决方案，还有很多社区可以讨论，社区文档都比较成熟，很容易上手~~
返回的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,既然表格渲染完成了，那么接下来就要做增删改查 了。
