47.(前端)用户列表的数据填充

1.概述

在上文中，我们做了一个列表用于展示用户的数据。此时，我们需要从后端获取到用户数据对列表进行填充

1.1流程

1. 定义方法从后端获取数据（使用后端定义的请求方法，后端定义的路由地址）
2. 创建时调用方法
3. 在列表中创建 :data 绑定好列表userList
4. userList接收后端返回来的数据
5. 修改好userList的对象与每行中的prop名字相同

1.2代码展示

<template>
<div>
    <div>
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/home' }">首页el-breadcrumb-item>
            <el-breadcrumb-item>用户管理el-breadcrumb-item>
            <el-breadcrumb-item>用户列表el-breadcrumb-item>
        el-breadcrumb>
    div>
        <el-card>
            <div>
                <el-row>
                    <el-col :span="8">
                        <el-input placeholder="请输入内容" class="input-with-select">
                            <el-button slot="append" icon="el-icon-search">el-button>
                        el-input>
                    el-col>
                    <el-col :span="2">
                        <el-button type="primary" icon="el-icon-circle-plus-outline">新增用户el-button>
                    el-col>
                el-row>
                <el-row>
                    <el-col>
                        <el-table :data="userList" border style="width:100%">
                            <el-table-column prop="id" label="用户名">el-table-column>
                            <el-table-column prop="name" label="昵称">el-table-column>
                            <el-table-column prop="email" label="邮箱">el-table-column>
                            <el-table-column prop="phone" label="电话">el-table-column>
                            <el-table-column label="操作">el-table-column>
                        el-table>
                    el-col>
                el-row>
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage4"
                    :page-sizes="[100, 200, 300, 400]" :page-size="100" layout="total, sizes, prev, pager, next, jumper" :total="400">
                el-pagination>
            div>
        el-card>
    div>
template>


<script>
export default {
    data () {
        return {
            userList : []
        }
    },
    // 创建时进行的操作
    created(){
        this.getUserList()
    },
    // 异步操作转同步：因为加载到这个页面时候就必须加载此数据
    methods: {
        async getUserList(){
            // 发送请求到后端：当时定义的请求方式是put，定义的地址是/user_list
            const { data : res } = await this.$axios.get('/api/user/user_list')
            console.log(res.data.users);
            this.userList = res.data.users
        }
    }

}
script>



<style>
    .el-table{
        margin-top: 10px;
    }
style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73

2.美化表格中的内容

由于操作那一栏中， 我们可以添加按钮对表格中的内容进行相对应的操作。所以，这里可以为其添加效果

<template>
<div>
    <div>
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/home' }">首页el-breadcrumb-item>
            <el-breadcrumb-item>用户管理el-breadcrumb-item>
            <el-breadcrumb-item>用户列表el-breadcrumb-item>
        el-breadcrumb>
    div>
        <el-card>
            <div>
                <el-row>
                    <el-col :span="8">
                        <el-input placeholder="请输入内容" class="input-with-select">
                            <el-button slot="append" icon="el-icon-search">el-button>
                        el-input>
                    el-col>
                    <el-col :span="2">
                        <el-button type="primary" icon="el-icon-circle-plus-outline">新增用户el-button>
                    el-col>
                el-row>
                <el-row>
                    <el-col>
                        <el-table :data="userList" border style="width:100%">
                            <el-table-column prop="id" label="用户名">el-table-column>
                            <el-table-column prop="name" label="昵称">el-table-column>
                            <el-table-column prop="email" label="邮箱">el-table-column>
                            <el-table-column prop="phone" label="电话">el-table-column>
                            <el-table-column label="操作">
                                <template slot-scope="scope">
                                    <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑el-button>
                                    <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除el-button>
                                template>
                            el-table-column>
                        el-table>
                    el-col>
                el-row>
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage4"
                    :page-sizes="[100, 200, 300, 400]" :page-size="100" layout="total, sizes, prev, pager, next, jumper" :total="400">
                el-pagination>
            div>
        el-card>
    div>
template>


<script>
export default {
    data () {
        return {
            userList : []
        }
    },
    // 创建时进行的操作
    created(){
        this.getUserList()
    },
    // 异步操作转同步：因为加载到这个页面时候就必须加载此数据
    methods: {
        async getUserList(){
            // 发送请求到后端：当时定义的请求方式是put，定义的地址是/user_list
            const { data : res } = await this.$axios.get('/api/user/user_list')
            console.log(res.data.users);
            this.userList = res.data.users
        }
    }

}
script>



<style>
    .el-table{
        margin-top: 10px;
    }
style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78

3.效果展示