通过路由的形式展示用户列表组件
因为目前我们跳转页面、会去到空白页
·面包屑导航、卡片视图(搜素区域、用户列表、分页)
·在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 属性
添加重新获取数据事件