ID 변환을 구현하는 Vue 방법: 1. Vue 구성 요소 코드를 "import {AjaxByAll} from '...'; 2. 들어오는 사용자 ID를 통해 백그라운드 인터페이스를 호출하고 이를 표시할 이름으로 변환합니다.
Windows 10 시스템, Vue. 버전 3, Dell G3 컴퓨터
Vue에서 ID를 변환하는 방법
vue 구성 요소를 사용하여 사람 ID와 이름을 변환합니다.
개발할 때 배경에는 사용자 ID가 하나만 저장되는 경우가 많습니다. , 사람 생성, 사람 수정 등이 있는데 프런트에 표시할 때 아이디를 사람 이름으로 변환해야 합니다.
일반적으로 사람 이름은 이 아이디를 통해 알 수 있습니다. 하지만 실제로는 이러한 변환이 필요한 경우가 많고 백그라운드 처리가 매우 번거롭습니다. , 더 다양하고 간단한 방법이 있을까요?
예, 사용자 ID를 전달하는 Vue 구성 요소를 고려해 볼 수 있습니다. , 컴포넌트는 사람의 이름을 반환하며, 나중에 백그라운드에서 변환할 필요가 없어 어디에서나 사용하기가 더 편리합니다!
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 컴포넌트는 백그라운드 인터페이스를 호출하여 이름 표시로 변환합니다.
컴포넌트는 다음과 같이 사용됩니다.
<el-table-column label="创建人" width="120">
<template slot-scope="scope">
<user-info :userId="scope.row.id"> </user-info>
</template>
</el-table-column>이제 이름 컴포넌트에 대한 직원 ID가 개발되었습니다!
vue 비디오 튜토리얼
"위 내용은 Vue에서 ID를 변환하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
