最近在做一個前后端分離的前端項目，目前只有我一個人以前沒有做過前端任何的項目，知識自學過一些前端知識。組長沒有說用什么框架，所以我選擇了最近挺火的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.賦值的時候第一種方法和第二種方法 都可以