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

最新推荐文章于 2023-05-02 11:46:07 发布

想成为数据分析师的开发工程师

最新推荐文章于 2023-05-02 11:46:07 发布

阅读量581

点赞数

文章标签：前端 vue elementui python 前端框架

本文链接：https://blog.csdn.net/m0_63953077/article/details/127459306

版权

本文档展示了如何在Vue.js应用中创建一个用户列表组件，从后端获取数据填充列表，并对表格内容进行美化。首先，定义了获取用户数据的方法，在组件创建时调用，将数据绑定到列表`userList`。接着，通过`el-table`展示数据，包括用户名、昵称、邮箱和电话。最后，为操作列添加了编辑和删除按钮，实现了基本的用户管理功能。代码中还包含了分页功能和样式调整。

摘要由CSDN通过智能技术生成

1.概述

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

1.1流程

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

1.2代码展示

<!-- src/components/user/User.vue -->
<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>

2.美化表格中的内容

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

<!-- src/components/user/User.vue -->
<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>