vue框架之 vue+element+axios 实现弹框显示后台数据列表
最近在做一个前后端分离的前端项目，目前只有我一个人以前没有做过前端任何的项目，知识自学过一些前端知识。组长没有说用什么框架，所以我选择了最近挺火的vue框架。从开始听到任务到现在整整一个月时间了，框架已经搭起来了，目前先把功能实现了，页面好看不好看的后期在做。之前没有咋写过博客，啥时候高兴了写一个，有的写得不还被我删了，从现在起，如果在不忙的情况下我会坚持下去。废话不多说，开始。
功能：是类似于商品的详情页面，点击详情按钮，查询后台的数据，并且在弹出框中显示出来。
参照官网：https://element.eleme.cn/#/zh-CN/component/dialog
以下是我自己写的。
1 <template> 2 <div> 3 弹窗显示 4 {{tagid}} 5 <!-- Table @click="dialogTableVisible = true" --> 6 <el-button type="text" @click="getTagDetail(tagId=2)">详情</el-button> 7 8 <el-dialog title="标签详情" :visible.sync="dialogTableVisible"> 9 <el-table :data="gridData"> 10 <el-table-column property="tagId" prop="tagId" label="序号" width="50"></el-table-column> 11 <el-table-column property="tag" prop="tag" label="标签编码" width="100"></el-table-column>
17 </el-table> 18 </el-dialog> 19 20 </div> 21 </template> 22 23 <script> 24 export default { 25 data () { 26 return { 27 tagId: '', 28 tag: '', 29 34 gridData: [{ 35 tagId: '', 36 tag: '', 37 42 }], 43 51 dialogTableVisible: false, 52 dialogFormVisible: false, 53 formLabelWidth: '120px' 54 } 55 }, 56 methods: { 57 getTagDetail: function () { 58 // eslint-disable-next-line no-undef 59 this.dialogTableVisible = true 60 this.$axios({ 61 method: 'post', 62 url: 'http://xxx。xxx', 63 data: { 64 'data': { 65 'tagId': this.tagId 66 } 67 } 68 }).then((response) => { 69 console.log(response.data.data) 70 this.tagId = response.data.data.tagId 71 // console.log(this.tagId) 72 this.gridData[0].tagId = this.tagId 73 this.tag = response.data.data.tag // 第一种方法 74 this.gridData[0].tag = this.tag 75 80 // 第二种方法. this.gridData[0].tag= response.data.data.dataSchema 81 }) 82 } 83 } 84 } 85 </script>
简单介绍一个运行流程：
点击详情 带着参数（id=x）进入getTagDetails方法，显示弹框，axios进行后台查询，response里给返回的数组进行赋值。
我在这里的花费时间较长的地点：
1.prop 是变量的属性，propperty不是
2.赋值的时候因为我是数组形式的，所以要带着角标进行赋值，如果你是几行数据的话，那么你可以response进行循环赋值。
3.赋值的时候第一种方法和第二种方法 都可以
