Méthode Vue pour implémenter la conversion d'ID : 1. Créez le code du composant Vue sous la forme "import {AjaxByAll} from '...'; 2. Appelez l'interface d'arrière-plan via l'ID utilisateur entrant et convertissez-la en un nom à afficher
L'environnement d'exploitation de ce tutoriel : Windows. 10, Vue. Version 3, ordinateur Dell G3
Comment convertir l'identifiant en vue ?
Utiliser le composant vue pour convertir l'identifiant et le nom de la personne
Lorsque nous développons, l'arrière-plan ne stocke souvent qu'un seul identifiant utilisateur. , comme créer des personnes, modifier des personnes, etc., mais lorsque nous l'affichons à la réception, nous devons convertir l'identifiant en nom de la personne
Généralement, le nom de la personne se trouve via cet identifiant dans. l'arrière-plan, mais dans de nombreux cas, cette conversion est requise, et le traitement en arrière-plan est très gênant, existe-t-il une méthode plus polyvalente et plus simple
Oui, nous pouvons considérer le composant Vue, en passant un identifiant utilisateur, le composant ? renvoie le nom de la personne, et il n'est pas nécessaire de le convertir en arrière-plan à l'avenir. Il est plus pratique de l'utiliser partout
Le code du composant Vue est le suivant :
<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>Comme mentionné ci-dessus, le composant Vue appelle ! l'interface d'arrière-plan et le convertit en un affichage de nom.
Le composant est utilisé comme suit :
<el-table-column label="创建人" width="120">
<template slot-scope="scope">
<user-info :userId="scope.row.id"> </user-info>
</template>
</el-table-column>Mais je ne suis pas professionnel en front-end, donc je n'ai pas encore trouvé de solution Si vous savez comment le résoudre, merci de laisser un message, merci
"
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Le composant parent Vue appelle la méthode du composant enfant
vue v-si
La différence entre vue2.0 et 3.0
Comment transmettre une valeur au composant vue
La différence entre vue3.0 et 2.0
vue instructions communes
Quelles sont les instructions couramment utilisées dans vue ?
La différence entre mpvue et vue
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
