41 lines
1004 B
Vue
41 lines
1004 B
Vue
|
<template>
|
||
|
|
<el-card>
|
||
|
|
<div style="margin-bottom: 16px">
|
||
|
|
<el-input v-model="userId" placeholder="请输入用户 ID" style="width: 200px; margin-right: 10px" />
|
||
|
|
<el-button type="primary" @click="fetchUserById">查询用户</el-button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<el-table :data="users" border style="width: 100%">
|
||
|
|
<el-table-column prop="id" label="ID" width="80" />
|
||
|
|
<el-table-column prop="username" label="用户名" />
|
||
|
|
<el-table-column prop="password" label="密码" />
|
||
|
|
</el-table>
|
||
|
|
</el-card>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import { getAllUser, getUserById } from "@/api/user";
|
||
|
|
|
||
|
|
export default {
|
||
|
|
name: "UserInfoView",
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
users: [], // 用户列表
|
||
|
|
userId: "", // 输入的 ID
|
||
|
|
};
|
||
|
|
},
|
||
|
|
mounted() {
|
||
|
|
getAllUser().then((res) => {
|
||
|
|
this.users = res.data.data.data || [];
|
||
|
|
});
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
fetchUserById() {
|
||
|
|
getUserById(this.userId).then((res) => {
|
||
|
|
this.users = [res.data.data];
|
||
|
|
});
|
||
|
|
},
|
||
|
|
},
|
||
|
|
};
|
||
|
|
</script>
|