vue如何实现转换id

本文讲解"vue怎么实现转换id",希望能够解决相关问题。

vue实现转换id的方法:1、创建Vue组件代码为“<template><div class="mc-user-info">{{name}}</div></template><script>import {AjaxByAll} from '...';2、通过传入的用户Id,调用后台接口,转换成名称显示即可。

巧用vue组件实现人员id及名称的转换

我们开发时,后台很多时候都只存储一个用户Id,如创建人,修改人等,但我们前台显示时,又需要将Id转成人员名称显示。  

一般很多时候在后台通过这条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,调用后台接口,转换成名称显示。 

组件使用如下:

 <el-table-column   label="创建人" width="120">
                <template slot-scope="scope">
                <user-info :userId="scope.row.id">  </user-info>
                </template>
</el-table-column>

关于 "vue怎么实现转换id" 就介绍到此。希望多多支持编程宝库

vue工程编译sass错误如何解决:本文讲解"vue工程编译sass错误怎么解决",希望能够解决相关问题。vue工程编译sass错误的解决办法:1、使用镜像源“cnpm install node-sass sass-loader --sav ...