49.(前端)用户查询功能实现

1.概述

为什么把查询功能和用户分页功能放在一起写，其实这两个功能很相似，都是展示用户信息，只是一个为全部展示，一个为部分展示。可以参考后端的用户信息查看那一篇文章。留心发现，其实，我们已经通过用户名称的模糊输入查找的功能已经做完了。

2.查询用户时候需要实现的功能

此时，我们只需要将输入框的内容（名称）传递给getUserList()，如何传递呢？
需要在queryInfo中给到一个name，再在v-bind绑定queryInfo.name属性的值
并且，我们需要绑定按钮，让他点击就触发一个函数searchUser，这个函数的功能就是调用getUserList。

3.报错

由于我们当初的设定，查询只在当前获取到的页中查询，这样就很不友好，需要在每一次触发searchUser函数中修改页面，跳转到第一条数据再进行查找

4.修改样式

1. 添加一个索引列
2. :gutter 修改组件间隔

5.代码展示

<!-- 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 :gutter="20">
                    <el-col :span="8">
                        <el-input placeholder="请输入用户名" v-model="queryInfo.name">
                            <el-button slot="append" icon="el-icon-search" @click="searchUser"></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 type="index"></el-table-column>
                            <el-table-column prop="id" label="ID"></el-table-column>
                            <el-table-column prop="name" label="用户名"></el-table-column>
                            <el-table-column prop="nick_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="queryInfo.pnum"
                    :page-sizes="[1,2,5,10]"  
                    :page-size="queryInfo.psize" 
                    layout="total, sizes, prev, pager, next, jumper" 
                    :total="total">
                </el-pagination>
            </div>
        </el-card>
    </div>
</template>


<script>
export default {
    data () {
        return {
            userList : [],
            // 用于传递页码和每页的条数,控制搜索条件
            queryInfo: {
                // 默认值
                name:'',
                pnum: 1,
                psize: 2
            },
            // 用于统计总共有几条数据
            total: 0
        }
    },
    // 创建时进行的操作
    created(){
        this.getUserList()
    },
    // 异步操作转同步：因为加载到这个页面时候就必须加载此数据
    methods: {
        async getUserList(){
            // 发送请求到后端：当时定义的请求方式是put，定义的地址是/user_list, 传递第几页第几条
            const { data : res } = await this.$axios.get('/api/user/user_list', { params: this.queryInfo })
            // 避免报错
            if(res.status != 200) return this.$msg.error(res.msg)
            console.log(res.data);
            this.total = res.data.totalPage
            this.userList = res.data.users
        },
        // 改变每页显示多少条数据
        handleSizeChange(val) {
            this.queryInfo.psize = val
            // 一定记得改变完要调用方法
            this.getUserList()
        },
        // 改变展示哪一页
        handleCurrentChange(val) {
            this.queryInfo.pnum = val
            this.getUserList()
        },
        searchUser(){
            this.queryInfo.pnum = 1
            this.getUserList()
        }
    }

}
</script>

<style>
    .el-table{
        margin-top: 10px;
    }
</style>