vue如何成功实现转换id

发布时间：2023-07-08 11:30:29 所属栏目：教程来源：互联网

导读： 　　这篇文章主要介绍“vue如何实现转换id”，在日常操作中，相信很多人在vue如何实现转换id问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答&rd

　　这篇文章主要介绍“vue如何实现转换id”，在日常操作中，相信很多人在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>

（编辑：源码网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!