站長資訊網
vue實現轉換id的方法：1、創建Vue組件代碼為“<template><div class="mc-user-info">{{name}}</div></template><script>import {AjaxByAll} from '…'；2、通過傳入的用戶Id，調用后臺接口，轉換成名稱顯示即可。
本教程操作環境：Windows10系統、Vue 3版、Dell G3電腦。
vue怎么實現轉換id？
巧用vue組件實現人員id及名稱的轉換
我們開發時，后臺很多時候都只存儲一個用戶Id,如創建人，修改人等，但我們前臺顯示時，又需要將Id轉成人員名稱顯示?！ ?/p>
一般很多時候在后臺通過這條Id找到人名，但實際很多情況都要這么轉換的，后臺處理很麻煩，有沒有比較通用性及簡單的辦法呢！
有的，我們可以考慮Vue的組件，傳入一個用戶Id,組件返回人名，以后就不需要再后臺轉換了。而且這個組件可以在頁面代碼上各處使用，這樣比較方便！
Vue組件代碼如下：
<template> <div class="mc-user-info"> {{name}} </div> </template> <script> import {AjaxByAll} from '../../api/api' export default { data() { return { name: null, id:this.userId } }, methods: { getUserName() { // alert(this.userId); //通過用戶id查找用戶名稱 AjaxByAll('get', '/rest/common/getData/sysOrgUserApiService?userId='+this.id, null).then(data => { if (data.code === 200) { this.name=data.data } }); } }, watch: { }, mounted: function () { console.log(this.id); this.getUserName(); }, props: { userId: String, required: true } } </script> <style> </style>
登錄后復制
如上所述，該Vue組件通過傳入的用戶Id,調用后臺接口，轉換成名稱顯示?！?/p>
組件使用如下：
<el-table-column label="創建人" width="120"> <template slot-scope="scope"> <user-info :userId="scope.row.id"> </user-info> </template> </el-table-column>
登錄后復制
至此人員Id轉名稱組件已開發完成！
-
延伸思考：
上述該組件實現了人員Id轉名稱功能，但我們是否以發散思維，繼續實現人員名片，人員頭像等基本組件功能。這樣這些組件可以到處使用。
-
遺留問題：
現在功能是沒有問題，頁面也是能正常顯示，但發現頁面加載時，調用了２次人員Id轉名稱的接口，即mounted加載了兩次?！ ?/p>
但個人對于前端也不是專業的，暫時沒有找到辦法。如果你知道如何解決，麻煩請留言，謝謝
推薦學習：《vue視頻教程》
