重点是在表单中绑定数据 :data="users,之后要在Vue中写好一个data数据,
<el-main> <div style="display: flex;"> <el-card style="width: 50%; margin-right: 10px;"> <template #header> <div class="card-header"> <span>Card name</span> </div> </template> <p v-for="o in 4" :key="o" class="text item"> {{ "List item " + o }} </p> </el-card> <el-card style="width:50%;"> <template #header> <div class="card-header"> <span>Card name</span> </div> </template> <div> <el-table :data="users"> <el-table-column prop="id" label="ID"></el-table-column> <el-table-column prop="username" label="用户名"></el-table-column> <el-table-column prop="name" label="姓名"></el-table-column> <el-table-column prop="address" label="地址"></el-table-column> </el-table> </div> </el-card> </div> </el-main>
利用mounted页面加载完成后触发
mounted(){ axios.get('http://localhost:9090/user/selectAll').then(res => { console.log(res) }) }
之后在data里有一些数据
绑定好一个data数据
export default { name: "HomeView", data() { return { isCollapse: false, asideWidth: "200px", flag: true, users: [] }; }}
这样data就返回了一些数据了
后台有3个数据 code msg data
利用好res获取好data数据,最终呈现效果,利用res获取data数据
mounted(){ axios.get('http://localhost:9090/user/selectAll').then(res => { this.users = res.data.data }) }