vue實(shí)現(xiàn)轉(zhuǎn)換id的方法：1、創(chuàng)建Vue組件代碼為“<template><div class="mc-user-info">{{name}}</div></template><script>import {AjaxByAll} from '…'；2、通過(guò)傳入的用戶Id，調(diào)用后臺(tái)接口，轉(zhuǎn)換成名稱顯示即可。

本教程操作環(huán)境：Windows10系統(tǒng)、Vue 3版、Dell G3電腦。

vue怎么實(shí)現(xiàn)轉(zhuǎn)換id？

巧用vue組件實(shí)現(xiàn)人員id及名稱的轉(zhuǎn)換

我們開發(fā)時(shí)，后臺(tái)很多時(shí)候都只存儲(chǔ)一個(gè)用戶Id,如創(chuàng)建人，修改人等，但我們前臺(tái)顯示時(shí)，又需要將Id轉(zhuǎn)成人員名稱顯示。　　

一般很多時(shí)候在后臺(tái)通過(guò)這條Id找到人名，但實(shí)際很多情況都要這么轉(zhuǎn)換的，后臺(tái)處理很麻煩，有沒(méi)有比較通用性及簡(jiǎn)單的辦法呢！　　　

有的，我們可以考慮Vue的組件，傳入一個(gè)用戶Id,組件返回人名，以后就不需要再后臺(tái)轉(zhuǎn)換了。而且這個(gè)組件可以在頁(yè)面代碼上各處使用，這樣比較方便！

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);                 //通過(guò)用戶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組件通過(guò)傳入的用戶Id,調(diào)用后臺(tái)接口，轉(zhuǎn)換成名稱顯示。　

組件使用如下：

 <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ā)完成！

• 延伸思考：

上述該組件實(shí)現(xiàn)了人員Id轉(zhuǎn)名稱功能，但我們是否以發(fā)散思維，繼續(xù)實(shí)現(xiàn)人員名片，人員頭像等基本組件功能。這樣這些組件可以到處使用。

• 遺留問(wèn)題：

現(xiàn)在功能是沒(méi)有問(wèn)題，頁(yè)面也是能正常顯示，但發(fā)現(xiàn)頁(yè)面加載時(shí)，調(diào)用了２次人員Id轉(zhuǎn)名稱的接口，即mounted加載了兩次?！　?/p>

但個(gè)人對(duì)于前端也不是專業(yè)的，暫時(shí)沒(méi)有找到辦法。如果你知道如何解決，麻煩請(qǐng)留言，謝謝

推薦學(xué)習(xí)：《vue視頻教程》