站長資訊網(wǎng)
vue實現(xiàn)轉(zhuǎn)換id的方法：1、創(chuàng)建Vue組件代碼為“<template><div class="mc-user-info">{{name}}</div></template><script>import {AjaxByAll} from '…'；2、通過傳入的用戶Id，調(diào)用后臺接口，轉(zhuǎn)換成名稱顯示即可。
本教程操作環(huán)境：Windows10系統(tǒng)、Vue 3版、Dell G3電腦。
vue怎么實現(xiàn)轉(zhuǎn)換id？
巧用vue組件實現(xiàn)人員id及名稱的轉(zhuǎn)換
我們開發(fā)時，后臺很多時候都只存儲一個用戶Id,如創(chuàng)建人，修改人等，但我們前臺顯示時，又需要將Id轉(zhuǎn)成人員名稱顯示?！ ?/p>
一般很多時候在后臺通過這條Id找到人名，但實際很多情況都要這么轉(zhuǎn)換的，后臺處理很麻煩，有沒有比較通用性及簡單的辦法呢！
有的，我們可以考慮Vue的組件，傳入一個用戶Id,組件返回人名，以后就不需要再后臺轉(zhuǎn)換了。而且這個組件可以在頁面代碼上各處使用，這樣比較方便！
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,調(diào)用后臺接口，轉(zhuǎn)換成名稱顯示?！?/p>
組件使用如下：
<el-table-column label="創(chuàng)建人" width="120"> <template slot-scope="scope"> <user-info :userId="scope.row.id"> </user-info> </template> </el-table-column>
至此人員Id轉(zhuǎn)名稱組件已開發(fā)完成！
-
延伸思考：
上述該組件實現(xiàn)了人員Id轉(zhuǎn)名稱功能，但我們是否以發(fā)散思維，繼續(xù)實現(xiàn)人員名片，人員頭像等基本組件功能。這樣這些組件可以到處使用。
-
遺留問題：
現(xiàn)在功能是沒有問題，頁面也是能正常顯示，但發(fā)現(xiàn)頁面加載時，調(diào)用了２次人員Id轉(zhuǎn)名稱的接口，即mounted加載了兩次?！ ?/p>
但個人對于前端也不是專業(yè)的，暫時沒有找到辦法。如果你知道如何解決，麻煩請留言，謝謝
推薦學(xué)習(xí)：《vue視頻教程》
