一、登录部分
1.登录部分的修改 重置
使用element中的 Form组件 完成结构样式
其中的参数
<!--
model:表单数据对象
rules:校验规则
ref:获取组件
prop:校验、重置用的
-->
ref=LoginForm
<!-- label-width="100px"
给了具体的值就在左边
没给就显示在上面
-->
提交的时候 获取表单this.$refs.LoginForm
使用this.$refs.loginForm.validate进行再次校验
startLogin() {
this.$refs.LoginForm.validate(valid => {
// console.log(valid) 是个布尔值
if (!valid) {
this.$message({
message: '校验失败',
type: 'error',
duration: 800,
})
}
console.log('校验成功')
})
},
// 重置
resetForm() {
this.$refs.LoginForm.resetFields()
},
取消eslint校验
/*eslint-disable*/
2. layout布局
el-row 一行
el-col 一列
每列24份 :span 控制 12 6 8 4....
必须 :span 因为需要的是number
使用 row的type属性 布局 居中
type="flex" justify="center" align="middle"
然后样式
高度均设100%
3 axios发送请求 成功跳转到 home页
4、scoped的工作原理
- 添加 scoped 之后的组件, 内部的组件
DOM结构都添加了来一个自定义属性=>data-v-唯一值
一个组件对应一个唯一值 - 设置样式的时候 , 通过
属性选择器设置的样式,能保证唯一性
二、home页
1、热更新 --hot 加在 --dev 可以实现局部更新
2、退出
退出弹框 this.$confirm
3、菜单组件
el-menu
<!--
el-menu : 菜单组件
- default-active="2" 默认高亮 值:index
- @open="handleOpen" 处理打开
- @close="handleClose" 处理关闭
- background-color="#545c64" 背景色
- text-color="#fff" 字体默认颜色
- active-text-color="#ffd04b" 高亮颜色
el-submenu 子菜单 (可以展开)
el-menu-item 菜单元素 (最小单位)
4、开启路由模式 router 以index的内容为路径跳转
开启路由模式
给 el-menu 添加 router属性 :router=‘true’
激活时, 会 以index 值作为路径进行跳转
5、嵌套组件 ★★ 路由规则里面 想让一个组件显示在另外一个组件里面
home 里面留一个出口 router-view
home 的路由规则里面 添加 children
6、处理高亮问题
:default-active="handleUrlPath()"
handleUrlPath() {
return this.$route.path
}
7、表格组件
axios.get(url,config) config : { params : {} , headers }
把返回的数据 赋值给表格的:data='usersData' 中的userData
8、分页组件 el-pagination
page-size 每页显示的数据条数
current-page当前页
// 保存列表数据
this.usersData = res.data.data.users
// 保存 total
this.total = res.data.data.total
// 保存当前页
this.pagenum = res.data.data.pagenum
三、user页面优化
1、抽离出三个部分
在user页面下分别创建 html less 和js文件进行分离
<template src="./Users.html"> </template>
<script src="./Users.js"></script>
<style scoped lang="less" src="./Users.less"></style>
2、输入框组件
<!--
slot="append" 插槽里面的具名
- append 后面
- prepend 前面
-->
3、面包屑
el-breadcrumb
4、添加用户
dialog对话框（对话框关闭触发回调 @closed=‘dialogClosed’）
visible.sync 是否显示对话框
addUserForm ：绑定的对象
<el-form
ref="addUserRef"
:rules="rules"
:model="addUserForm"
label-width="80px"
>
输入信息+校验(pattern 添加正则)
1、添加rules属性 :rules='rules'
2、prop
3、设置rules
添加用户发送请求（axios.post(url,data,config)）
在closed回调中重置表单
// 监听对话框关闭
dialogClosed() {
this.$refs.addUserRef.resetFields()
},
5、列的两种形式
- 正常列
prop="username" 拿到数据里的 username 字段对应的值 直接赋值给当前列
2.自定义列
2.1 需要处理后再赋值的
2.2 列里面包含组件的
自定义列的用法(scope可以拿到当前行的数据)
列中添加的组件 开关switch
控件外面会多一层 作用域插槽 <template slot-scope = 'scope'>
scope拿到当前行的数据
直接在 el-switch中使用 scope.row.你需要的数据
<el-table-column>
<template slot-scope='scope'>
<el-switch v-model='scope.row.mg_state'></el-switch>
</template>
</el-table-column>
el-button
<el-button
plain
镂空
size="mini"
type="primary"
icon="el-icon-edit"
></el-button>
6、删除用户
通过 scope.row 拿到当前行数据中的id 点击的时候 传递
let res = await this.$axios.delete(`/users/${id}`, {
7、打开关闭权限
调用switch的change函数
let res = await this.$axios.put(`/users/${id}/state/${mg_state}`, null, {
promise
promise 以编写同步代码的方式 处理异步的方案
四、编辑模块
点击编辑按钮 =>把当前行的对象传递过来 => row => 赋值给编辑的表单
// 搜索关键字
search() {
this.getUsersData(1, this.input3)
},
async getUsersData(pagenum = 1, query = '') {
// axios.get(url,config) config : { params : {} , headers }
let res = await this.$axios.get('/users', {
// 参数对象
params: {
query, // 给一个代表请求全部 a 包含a的,
pagenum, // 当前第一页
pagesize: 2 // 2个
},
this.getUsersData(this.pagenum, this.input3)
五、权限列表模块
行号 el-table-column type=index
:index="indexMethod"
自定义索引
indexMethod(index) {
return index
}
六、角色列表
角色列表 - 自定义索引和展开行
type=‘index’ 自定义索引 :index=‘indexMethod’ (从 0 开始)
type=‘expand’ 展开行 template slot-scope=‘scope’
角色列表 左边展示权限信息
type=expand slot-scope
<!-- 展开行 -->
<el-table-column type="expand">
<template slot-scope="scope">
<!-- 第一层 -->
<el-row
class="row1"
v-for="item1 in scope.row.children"
:key="item1.id"
>
<el-col :span="4">
<el-tag type="primary">{{ item1.authName }}</el-tag>
<i class="el-icon-arrow-right"></i>
</el-col>
<el-col :span="20">
<!-- 第二层 -->
<el-row
class="row2"
v-for="item2 in item1.children"
:key="item2.id"
>
<el-col :span="4">
<el-tag type="success"> {{ item2.authName }}</el-tag>
<i class="el-icon-arrow-right"></i>
</el-col>
<el-col :span="20">
<!-- 第三层 -->
<el-tag
class="tag"
type="warning"
v-for="item3 in item2.children"
:key="item3.id"
>{{ item3.authName }}</el-tag
>
</el-col>
</el-row>
</el-col>
</el-row>
</template>
</el-table-column>
分配权限 使用树形控件
<!--
el-tree : 树形控件
- data : 树的数据
- show-checkbox 是否展示多选框
- node-key="id" 以id作为节点
- :default-expanded-keys 默认 展开
- :default-checked-keys="[5]" 默认选中
- √ : 选中(全选)
- - : 半选
- :props="defaultProps" 配置
-->
defaultProps重要 展示所有的权限信息
// children : 结构
// label : 标题
defaultProps: {
// 以 数据的 children/child 负责显示结构
children: 'children',
// 以数据的 字段 label 负责显示标题
label: 'authName'
},
点击分配权限 将当前的权限会显到权限树上面 参考：树节点的选择
- 注意点 1 : 获取第三层 的 id (最里面的那一层 可以控制上面的层数 因为有pid)
- 注意点 2 : 异步 DOM 更新 nextTick
// 获取第三层的id
let keys = []
row.children.forEach(item1 => {
item1.children.forEach(item2 => {
item2.children.forEach(item3 => {
// console.log(item3.id)
keys.push(item3.id)
})
})
})
this.$nextTick(() => {
console.log(this.$refs.tree)
this.$refs.tree.setCheckedKeys(keys)
})
修改权限
// 分配权限
async assignRights() {
// 1. 获取半选 和 全选的 key(id)
let keys1 = this.$refs.tree.getHalfCheckedKeys()
let keys2 = this.$refs.tree.getCheckedKeys()
let keys = [...keys1, ...keys2]
// post(url,data,config)
// 参数1 :角色id this.roleId
// 参数2 : rids :所有权限的id
let res = await this.$axios.post(`roles/${this.roleId}/rights`, {
rids: keys.join(',')
})
// console.log(res)
if (res.data.meta.status === 200) {
// 1. 关闭对话框
this.dialogAssignRightsVisible = false
// 2. 提示
this.$message({
message: '角色授权成功',
type: 'success',
duration: 800
})
// 3. 刷新一下
this.loadRolesData()
}
500
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
