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.赋值的时候第一种方法和第二种方法 都可以

转载于:https://www.cnblogs.com/tdcqcrtd/p/11217659.html