6用户列表

通过路由的形式展示用户列表组件

因为目前我们跳转页面、会去到空白页
·面包屑导航、卡片视图（搜素区域、用户列表、分页）

·在component文件夹中新建一个user文件夹 里面新建一个User.vue组件
·User.vue 创建模板，在路由文件导入此组件，并添加到home的子组件里面

import Users from '../components/user/Users.vue'
children:[{path:'/welcome',component:Welcome},{path:'/users',component:Users}]

在sessionStorage中保存左侧菜单的激活状态

跳到点击的页面时，导航栏对应的选项没有高亮
·使用element ui 中的属性default-active

原理：点击了的导航，我们保持到sessionStorage中，然后当页面再次刷新，我们再从里面提取sessionStorage

·给二级菜单绑定单击事件saveNavState，保存链接的激活状态activePath

·因为一开始就要获取，所以我们需要创建一个生命周期，并且创建数据 activePath

·对default-active进行动态绑定

·需要自动赋值

绘制用户列表组件的基本布局结构

·面包屑导航 使用element ui 的breaderCrumb面包屑
·按需导入、注册对应的组件（element.js）
·卡片视图 使用element ui 的Card卡片
·按需导入、注册Card 组件
·在 global.css中给 el-breadcrumb、el-card写样式
·绘制卡片搜素区域
使用element ui 的 input 输入框（复合型输入框的第三种）
·使用Layout布局中的 栅格布局 el-row >el-col（按需导入）
：gutter （el-col直接的空隙）

<el-card >
            <!-- 搜素与添加区域 -->
            <!-- :gutter 值el-col之间的空隙 -->
            <el-row :gutter="2">
                <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="4">
                    <el-button type="primary">添加用户</el-button>
                </el-col>
            </el-row>
        </el-card>        

效果

获取用户列表数据

·查看请求api参数

·定义基本代码结构
·创建生命周期 getUserList() 一开始就进行数据请求
·创建getUserList() 方法发起axios请求
·创建参数对象 queryInfo把请求的参数都存放到里面
·使用async await 简化

16 使用el-table组件渲染基本的用户列表

·使用element ui中table表的 的el-table组件（并且需要查看用法）
·使用el-table>el-table-column （按需导入）
·为表格导入数据源 ：data（数据源数组） prop（数据源）

效果（状态和角色我们后面再修改）

·修改一下样式
1、添加边框线 border stripe

为表格添加索引列

通过作用域插槽渲染 操作列

·在模板里面定义一个属性 slot-scope接收作用域插槽的一个数据scope
·添加button按钮（使用element ui button的 图标按钮）
修改一下按钮图标和颜色、使用element ui 提供的修改大小

·为操作列 添加宽度、让三个按钮的放的下
·最后一个按钮可以提示文字 使用element ui 里面的 Tooltip文字提示

实现分页效果

·使用element ui 提供的组件 pagination 分页
·使用完整功能
size-change和current-change事件来处理页码大小和当前页变动时候触发的事件
·@size-change=“handleSizeChange” 定义handleSizeChange方法 （一页显示多少条数据）
·@current-change=“handleCurrentChange” 定义handleCurrentChange方法
方法 （当前在哪一页）

// 监听pageSize改变的事件
        handleSizeChange(newSize){
            console.log(newSize)
        },
        // 监听 页码值 改变的事件
        handleCurrentChange(newPage){
            console.log(newPage)
        }

·动态绑定当前页

·当选了改变pagesize时，我们需要重新获取数据（改变queryInfo.page），按选择的pagesize渲染数据。

        // 监听pageSize改变的事件
        handleSizeChange(newSize){
            // console.log(newSize)
            this.queryInfo.pagesize = newSize
            this.getUserList()
        },

效果

·监听 页码值 改变的事件，页面值改变了 数据我们也需要重新改变

// 监听 页码值 改变的事件
        handleCurrentChange(newPage){
            // console.log(newPage)
            this.queryInfo.pagenum = newPage
            this.getUserList()
        }

·给分页条 添加一下magrin-top

修改用户状态

修改的状态同步保存到数据库中
监听数据状态
使用api接口
·使用element ui switch开关 里面的events

·v-model是规定好的绑定数据

·定义userStateChanged函数监听switch开关状态的改变

·使用api接口保存修改的状态

实现搜索功能

实现搜索功能、添加一键删除按钮
·将文本框和data中的数据进行双向绑定、然后点击按钮调用getuserList获取数据进行查询

·使用element ui 里面 input输入框的 clearable 属性

添加重新获取数据事件