记一次基于element-ui的vue-demo_vue elementui dome

一、登录部分

1.登录部分的修改 重置

使用element中的 Form组件 完成结构样式

其中的参数

<!-- 
      model:表单数据对象
      rules:校验规则
      ref:获取组件
      prop:校验、重置用的
     -->
	ref=LoginForm
    <!-- label-width="100px"
        给了具体的值就在左边
        没给就显示在上面
      -->
1
2
3
4
5
6
7
8
9
10
11

提交的时候 获取表单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()
},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

取消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%
1
2
3
4
5
6
7
8
9
10

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 菜单元素 (最小单位)
      
1
2
3
4
5
6
7
8
9
10
11

4、开启路由模式 router 以index的内容为路径跳转

开启路由模式

给 el-menu 添加 router属性 :router=‘true’
激活时, 会 以index 值作为路径进行跳转

5、嵌套组件 ★★ 路由规则里面 想让一个组件显示在另外一个组件里面

home 里面留一个出口 router-view
home 的路由规则里面 添加 children

6、处理高亮问题

:default-active="handleUrlPath()"

handleUrlPath() {
      return this.$route.path
    }
1
2
3

7、表格组件

axios.get(url,config)  config : { params : {} , headers }

把返回的数据  赋值给表格的:data='usersData'  中的userData
1
2
3

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
1
2
3
4
5
6

三、user页面优化

1、抽离出三个部分

在user页面下分别创建 html less 和js文件进行分离

<template src="./Users.html"> </template>

<script src="./Users.js"></script>

<style scoped lang="less" src="./Users.less"></style>
1
2
3
4
5

2、输入框组件

<!-- 
    slot="append" 插槽里面的具名  
    - append 后面
    - prepend 前面
   -->
1
2
3
4
5

3、面包屑

el-breadcrumb

4、添加用户

dialog对话框（对话框关闭触发回调 @closed=‘dialogClosed’）

visible.sync  是否显示对话框
addUserForm  ：绑定的对象
<el-form
      ref="addUserRef"
      :rules="rules"
      :model="addUserForm"
      label-width="80px"
    >
1
2
3
4
5
6
7
8

输入信息+校验(pattern 添加正则)

1、添加rules属性  :rules='rules'
2、prop
3、设置rules
1
2
3

添加用户发送请求（axios.post(url,data,config)）

在closed回调中重置表单

// 监听对话框关闭
    dialogClosed() {
      this.$refs.addUserRef.resetFields()
    },
1
2
3
4

5、列的两种形式

1. 正常列

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>
1
2
3
4
5
6
7
8

el-button

<el-button
  plain
  镂空
  size="mini"
  type="primary"
  icon="el-icon-edit"
></el-button>
1
2
3
4
5
6
7

6、删除用户

通过 scope.row 拿到当前行数据中的id 点击的时候 传递

let res = await this.$axios.delete(`/users/${id}`, {
1

7、打开关闭权限

调用switch的change函数

let res = await this.$axios.put(`/users/${id}/state/${mg_state}`, null, {
1

promise

promise  以编写同步代码的方式 处理异步的方案
1

四、编辑模块

点击编辑按钮 =>把当前行的对象传递过来 => 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)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

五、权限列表模块

行号  el-table-column  type=index

:index="indexMethod"   

自定义索引
indexMethod(index) {
 return index   
}
1
2
3
4
5
6
7
8

六、角色列表

角色列表 - 自定义索引和展开行

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

分配权限 使用树形控件

<!-- 
  el-tree : 树形控件
   - data : 树的数据
   - show-checkbox 是否展示多选框
   - node-key="id"  以id作为节点
   - :default-expanded-keys 默认 展开
   - :default-checked-keys="[5]" 默认选中
   - √ : 选中(全选)
   - - : 半选
   -  :props="defaultProps"  配置
 -->
1
2
3
4
5
6
7
8
9
10
11

defaultProps重要 展示所有的权限信息

// children : 结构
// label : 标题
defaultProps: {
  // 以 数据的 children/child 负责显示结构
  children: 'children',
  // 以数据的 字段 label  负责显示标题
  label: 'authName'
},
1
2
3
4
5
6
7
8

点击分配权限 将当前的权限会显到权限树上面 参考：树节点的选择

- 注意点 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)
      })
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

修改权限

// 分配权限
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()
  }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25