vue怎麼實作轉換id

vue實作轉換id的方法：1.建立Vue元件程式碼為「d477f9ce7bf77f53fbcf36bec1b69b7a0399fe30ea98f4e05378029a156f5cc5{{name}}16b28748ea4df4d9c2150843fecfba68< ;/template>3f1c4e4b6b16bbbd69b2ee476dc4f83aimport {AjaxByAll} from '...'；2、透過傳入的使用者Id，呼叫後台接口，轉換成名稱顯示即可。

#本教學操作環境：Windows10系統、Vue 3版、Dell G3電腦。

vue怎麼實作轉換id？

巧用vue元件實現人員id及名稱的轉換

我們開發時，後台很多時候都只儲存一個用戶Id,如創建人，修改人等，但我們前台顯示時，又需要將Id轉成人員名稱顯示。　　

一般很多時候在後台透過這條Id找到人名，但實際很多情況都要這麼轉換的，後台處理很麻煩，有沒有比較通用性和簡單的辦法呢！　　　

有的，我們可以考慮Vue的組件，傳入一個用戶Id,組件返回人名，以後就不需要再後台轉換了。而且這個組件可以在頁面代碼上各處使用，這樣比較方便！

Vue元件程式碼如下：

<template>
    <div class="mc-user-info">
    {{name}}
    </div>
</template>
<script>
    import {AjaxByAll} from &#39;../../api/api&#39;
    export default {
        data() {
            return {
                name: null,
                id:this.userId
            }
        },
        methods: {
            getUserName() {
               // alert(this.userId);
                //通过用户id查找用户名称
                AjaxByAll(&#39;get&#39;, &#39;/rest/common/getData/sysOrgUserApiService?userId=&#39;+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,呼叫後台接口，轉換成名稱顯示。　

#元件使用如下：

 <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加載了兩次。　　## ####但個人對於前端也不是專業的，暫時沒有找到辦法。如果你知道如何解決，麻煩請留言，謝謝######推薦學習：《###vue視頻教程###》# ##

以上是vue怎麼實作轉換id的詳細內容。更多資訊請關注PHP中文網其他相關文章！