Kaedah Vue untuk melaksanakan penukaran id: 1. Cipta kod komponen Vue sebagai " < ;/template>
import {AjaxByAll} daripada '...'; tutorial ini: Sistem Windows 10, versi Vue 3, komputer Dell G3
Bagaimana untuk menukar ID dalam vue Dengan mahir menggunakan komponen vue untuk menukar ID dan nama kakitangan 
Apabila kami membangun, latar belakang selalunya hanya menyimpan satu ID pengguna, seperti pencipta, pengubah suai, dll., tetapi apabila kami memaparkannya di meja depan, kami memerlukan Tukar Id kepada paparan nama orang
Biasanya, nama orang ditemui melalui Id ini di latar belakang, bagaimanapun, dalam banyak kes, ia perlu untuk menukar dengan cara ini sangat menyusahkan Ya, kami boleh mempertimbangkan komponen Vue, memasukkan ID pengguna, komponen itu mengembalikan nama orang itu, dan tidak perlu melakukan penukaran latar belakang pada masa hadapan, dan komponen ini boleh digunakan di mana-mana dalam kod halaman ! Kod komponen Vue adalah seperti berikut:
Seperti yang dinyatakan di atas, komponen Vue memanggil antara muka latar belakang melalui ID pengguna masuk dan menukarnya menjadi paparan nama 🎜> Komponen digunakan seperti berikut:
ID personel untuk menamakan komponen penukaran telah dibangunkan
Pemikiran lanjutan:
Komponen di atas melaksanakan fungsi menukar ID kakitangan kepada nama, tetapi perlukah kita menggunakan pemikiran berbeza untuk terus melaksanakan fungsi komponen asas seperti kad perniagaan kakitangan dan avatar kakitangan Dengan cara ini, komponen ini boleh digunakan di mana-mana. >Isu yang tinggal:
<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>Tiada masalah dengan fungsi sekarang, dan halaman boleh dipaparkan seperti biasa Walau bagaimanapun, didapati bahawa apabila halaman dimuatkan, antara muka untuk menukar kakitangan ID untuk menamakan dipanggil dua kali, iaitu, dipasang dua kali.
<el-table-column label="创建人" width="120">
<template slot-scope="scope">
<user-info :userId="scope.row.id"> </user-info>
</template>
</el-table-column>Atas ialah kandungan terperinci Bagaimana untuk menukar id dalam vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
