电商后台管理项目-用户列表实现

有钱啊
297 阅读3分钟

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

1.在component下创建users文件夹，下有users.vue组件

<template>
  <div>用户列表组件</div>
</template>
<script>
export default {
  data: () => ({})
}
</script>
<style lang="less" scoped>
</style>

2.配置users的路由，因为用户列表组件显示在home组件中，所以users的路由应该设置在home的children属性中

import Users from '../components/users/Users.vue'

  {
    path: '/home',
    component: Home,
    redirect: '/welcome',
    children: [
      {
        path: '/welcome',
        component: Welcome
      },
      {
        path: '/users',
        component: Users
      }
    ]
  }
  • 点击用户列表二级菜单，跳转到用户列表组件

image.png

二、在sessionStorage中保存左侧菜单的激活状态（点击后保持高亮）

1.给menu绑定default-active属性

<el-menu
            background-color="#333744"
            text-color="#fff"
            active-text-color="#409EFF"
            unique-opened
            :collapse="isCollapse"
            :collapse-transition="false"
            router
            :default-active="activePath"
          >

2.给二级菜单设置点击事件

<el-menu-item
                :index="'/' + subitem.path"
                v-for="subitem in item.children"
                :key="subitem.id"
                @click="getNavState('/' + subitem.path)"
              >

    // 点击二级菜单存储路由path，使高亮
    getNavState(activePath) {
      window.sessionStorage.setItem('activePath', activePath)
      this.activePath = activePath
    }

3.data里设置activePath属性值

    data: () => ({
    menulist: [],
    iconlist: {
      125: 'el-icon-user-solid',
      103: 'el-icon-present',
      101: 'el-icon-s-goods',
      102: 'el-icon-s-order',
      145: 'el-icon-monitor'
    },
    isCollapse: false,
    activePath: ''
  }),

4.当页面加载时，就触发activePath属性（刷新后也照样高亮）

  created() {
    this.getMenuList()
    this.activePath = window.sessionStorage.getItem('activePath')
  },

Home.vue

<template>
  <div class="home">
    <el-container class="home-conatiner">
      <!-- 头部区域 -->
      <el-header>
        <div>
          <img src="../assets/logo.png" alt="" />
          <span>电商后台管理系统</span>
        </div>
        <el-button type="info" @click="outlogin">退出登录</el-button>
      </el-header>
      <!-- 页面主体区域 -->
      <el-container>
        <!-- 侧边栏（左） -->
        <el-aside :width="isCollapse ? '64px' : '200px'">
          <!-- 菜单区域 -->
          <div class="toggle-button" @click="toggle">|||</div>
          <el-menu
            background-color="#333744"
            text-color="#fff"
            active-text-color="#409EFF"
            unique-opened
            :collapse="isCollapse"
            :collapse-transition="false"
            router
            :default-active="activePath"
          >
            <!-- 一级菜单 -->
            <el-submenu
              :index="item.id + ''"
              v-for="item in menulist"
              :key="item.id"
            >
              <!-- 一级菜单模板区域 -->
              <template slot="title">
                <i :class="iconlist[item.id]"></i>
                <span>{{ item.authName }}</span>
              </template>
              <!-- 二级菜单 -->
              <!-- :index="'/' + subitem.path": 二级菜单的跳转路径 -->
              <el-menu-item
                :index="'/' + subitem.path"
                v-for="subitem in item.children"
                :key="subitem.id"
                @click="getNavState('/' + subitem.path)"
              >
                <!-- 二级菜单模板区域 -->
                <template slot="title">
                  <i class="el-icon-menu"></i>
                  <span>{{ subitem.authName }}</span>
                </template>
              </el-menu-item>
            </el-submenu>
          </el-menu>
        </el-aside>
        <!-- 右侧内容主体 -->
        <el-main>
          <!-- 路由占位符 -->
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script>
export default {
  data: () => ({
    menulist: [],
    iconlist: {
      125: 'el-icon-user-solid',
      103: 'el-icon-present',
      101: 'el-icon-s-goods',
      102: 'el-icon-s-order',
      145: 'el-icon-monitor'
    },
    isCollapse: false,
    activePath: ''
  }),
  created() {
    this.getMenuList()
    this.activePath = window.sessionStorage.getItem('activePath')
  },
  methods: {
    // 退出登录
    outlogin() {
      // 清除token
      window.sessionStorage.clear()
      // 跳转到登录页面
      this.$router.push('/login')
    },
    // 获取左侧所有菜单
    async getMenuList() {
      // 结构数据data，并取名为res
      const { data: res } = await this.$http.get('menus')
      // console.log(res)
      if (res.meta.status !== 200) return this.$message.error(res.meta.msg)
      this.menulist = res.data
      // console.log(this.menulist)
    },
    // 点击按钮 切换菜单 折叠展开
    toggle() {
      this.isCollapse = !this.isCollapse
    },
    // 点击二级菜单存储路由path，使高亮
    getNavState(activePath) {
      window.sessionStorage.setItem('activePath', activePath)
      this.activePath = activePath
    }
  }
}
</script>
<style lang="less" scoped>
.home {
  height: 100%;
  .home-conatiner {
    height: 100%;
    .el-header {
      background-color: #373d41;
      align-items: center;
      display: flex;
      justify-content: space-between;
      div {
        display: flex;
        justify-content: start;
        align-items: center;
        img {
          width: 60px;
          height: 60px;
          background-color: white;
          border-radius: 50%;
        }
        span {
          font-size: 20px;
          color: white;
          padding-left: 30px;
        }
      }
      .el-button {
      }
    }
    .el-aside {
      background-color: #333744;
      .el-menu {
        border: none;
      }
      .toggle-button {
        line-height: 24px;
        background-color: #4a5064;
        border: none;
        color: white;
        text-align: center;
        letter-spacing: 0.2em;
        cursor: pointer;
      }
    }
    .el-main {
      background-color: #eaedf1;
    }
  }
}
</style>

三、绘制用户列表组件的基础布局结构

image.png

  • users.vue
<template>
  <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>
    <!-- 卡片视图区域 -->
    <el-card class="box-card">
      <!-- 搜索与添加区域 -->
      <el-row :gutter="20">
        <el-col :span="8">
          <el-input placeholder="请输入内容">
            <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>
  </div>
</template>
<script>
export default {
  data: () => ({})
}
</script>
<style lang="less" scoped>
</style>

四、获取用户列表数据

1.在页面加载时就获取数据

  created() {
    this.getUsersList()
  },

2.定义获取用户列表数据的函数

  methods: {
    async getUsersList() {
      const { data: res } = await this.$http.get('users', { params: this.queryInfo })
      if (res.meta.status !== 200) {
        return this.$message.error('获取用户列表失败！')
      }
      this.userslist = res.data.users
      this.total = res.data.total
      console.log(res)
    }
  }

3.data里存放数据

  data: () => ({
    queryInfo: {
      query: '',
      pagenum: 1,
      pagesize: 2
    },
    userslist: [],
    total: 0
  }),

五、渲染用户列表

  • 使用el-table组件，根据api文档中的属性渲染数据（prop="username"）
<!-- 用户列表 -->
      <el-table :data="userslist" border="1">
        <el-table-column prop="username" label="用户名"> </el-table-column>
        <el-table-column prop="mobile" label="电话"> </el-table-column>
        <el-table-column prop="email" label="邮箱"> </el-table-column>
        <el-table-column prop="role_name" label="角色"> </el-table-column>
        <el-table-column prop="mg_state" label="状态"> </el-table-column>
        <el-table-column prop="" label="操作"> </el-table-column>
      </el-table>

image.png

六、为表格添加索引列

  • 只要在表格属性一列添加type="index"就可以了
<!-- 用户列表 -->
      <el-table :data="userslist" border stripe>
        <el-table-column type="index"></el-table-column>
        <el-table-column prop="username" label="用户名"> </el-table-column>
        <el-table-column prop="mobile" label="电话"> </el-table-column>
        <el-table-column prop="email" label="邮箱"> </el-table-column>
        <el-table-column prop="role_name" label="角色"> </el-table-column>
        <el-table-column prop="mg_state" label="状态"> </el-table-column>
        <el-table-column prop="" label="操作"> </el-table-column>
      </el-table>

七、自定义状态列的显示效果（使用作用域插槽）

    <el-table-column label="状态">
          <template slot-scope="scope">
            <!-- 可以获取一整行的数据 -->
            <!-- {{ scope.row }} -->
            <el-switch v-model="scope.row.mg_state"> </el-switch>
          </template>
        </el-table-column>
  • slot-scope="scope"，其中{{ scope.row }}可以获取一整行的数据

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

    <el-table-column prop="" label="操作" width="180px">
          <!-- 编辑按钮 -->
          <el-button type="primary" icon="el-icon-edit" size="mini"></el-button>
          <!-- 删除按钮 -->
          <el-button
            type="danger"
            icon="el-icon-delete"
            size="mini"
          ></el-button>
          <!-- 设置按钮 -->
          <el-tooltip
            class="item"
            effect="dark"
            content="分配角色"
            placement="top"
            :enterable="false"
          >
            <el-button
              type="warning"
              icon="el-icon-setting"
              size="mini"
            ></el-button>
          </el-tooltip>
        </el-table-column>
  • enterable 鼠标是否可进入到 tooltip 中

九、实现分页效果

1.引入分页组件，并分析该组件中的属性的作用，绑定数据

<!-- 分页区域 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryInfo.pagenum"
        :page-sizes="[1, 2, 3, 4]"
        :page-size="queryInfo.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>

2.定义其中的两个函数

    // 显示多少条数据
    handleSizeChange(newsize) {
      console.log(newsize)
    },
    // 显示当前页面
    handleCurrentChange(newpage) {
      console.log(newpage)
    }

3.实现函数

    // 监听 pagesize 改变的事件
    handleSizeChange(newsize) {
      this.queryInfo.pagesize = newsize
      this.getUsersList()
    },
    // 监听 页码值 改变的事件
    handleCurrentChange(newpage) {
      this.queryInfo.pagenum = newpage
      this.getUsersList()
    }

十、修改用户状态

1.给el-switch组件添加change事件

    <el-switch
              v-model="scope.row.mg_state"
              @change="changeState(scope.row)"
            >
            </el-switch>

2.实现change事件

        // 修改状态
    async changeState(state) {
      const { data: res } = await this.$http.put(`users/${state.id}/state/${state.mg_state}`)
      if (res.meta.status !== 200) {
        state.my_state = !state.my_state
        return this.$message.error('设置用户状态失败')
      }
      this.$message.success('修改用户状态成功！')
    }
  • 通过组件中scope.row传递数据，根据api文档修改状态this.http.put(‘users/http.put(`users/{state.id}/state/state.mgstate‘)，此时返回的是一个Promise对象，要用async/await,则能够返回真实数据，并用data:res来解构数据，当res.meta.status!==200时，则修改失败，此时，虽然在数据库中修改失败，但是页面上以显示修改后的状态，所以要先把转态改回原始状态（state.mystate=!state.mystate），并通过returnthis.{state.mg_state}`)，此时返回的是一个Promise对象，要用async/await,则能够返回真实数据，并用 {data:res} 来解构数据，当res.meta.status !== 200时，则修改失败，此时，虽然在数据库中修改失败，但是页面上以显示修改后的状态，所以要先把转态改回原始状态（state.my_state = !state.my_state），并通过return this.message.error('设置用户状态失败')，提示修改状态失败。若res.meta.status !== 200，则this.$message.success('修改用户状态成功！')。

十一、实现搜索功能

1.给输入框绑定数据

    queryInfo: {
      // 查询参数
      query: '',
      // 当前的页数
      pagenum: 1,
      // 当前每页显示多少条数据
      pagesize: 2
    },


<el-input placeholder="请输入内容" v-model="queryInfo.query">

2.给搜索按钮添加点击事件，点击后根据搜索字段获取用户列表

            <el-button
              slot="append"
              icon="el-icon-search"
              @click="getUsersList"
            ></el-button>

3.优化功能，使能够清空输入框，并且在清空输入框的时候重新获取用户列表

  • 1.给input输入框添加clearable可清空属性
<el-input placeholder="请输入内容" v-model="queryInfo.query" clearable>

image.png

  • 2.给输入框绑定clear事件（clear，在点击由 clearable 属性生成的清空按钮时触发）
 <el-input placeholder="请输入内容" v-model="queryInfo.query" clearable @clear="getUsersList">

十二、渲染添加用户的对话框

1.引入el-dialog对话框组件

    <!-- 弹出添加用户弹框 -->
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      <span>这是一段信息</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>

2.给添加用户按钮添加点击事件

    <el-button type="primary" @click="dialogVisible = true"
            >添加用户</el-button
          >
  • dialogVisible 控制页面显示隐藏

十三、渲染添加用户的表单

1.引入el-form组件，并修改其中的属性，把需要用到的属性放到data中

     <!-- 内容主体区（表单） -->
      <el-form
        :model="addForm"
        :rules="addFormRules"
        ref="addFormRef"
        label-width="70px"
      >
        <el-form-item label="用户名" prop="username">
          <el-input v-model="addForm.username"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="addForm.password"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="addForm.email"></el-input>
        </el-form-item>
        <el-form-item label="手机" prop="phone">
          <el-input v-model="addForm.phone"></el-input>
        </el-form-item>
      </el-form>
  • data
    data: () => ({
    queryInfo: {
      // 查询参数
      query: '',
      // 当前的页数
      pagenum: 1,
      // 当前每页显示多少条数据
      pagesize: 2
    },
    // 用户列表
    userslist: [],
    total: 0,
    // 弹出对话框
    dialogVisible: false,
    // 表单属性
    addForm: {
      username: '',
      password: '',
      email: '',
      phone: ''
    },
    // 表单验证规则
    addFormRules: {
      username: [
        { required: true, message: '请输入用户名', trigger: 'blur' },
        { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
      ],
      password: [
        { required: true, message: '请输入活动名称', trigger: 'blur' },
        { min: 6, max: 10, message: '长度在 6 到 10 个字符', trigger: 'blur' }
      ],
      email: [
        { required: true, message: '请输入邮箱地址', trigger: 'blur' },
        { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
      ],
      phone: [
        { required: true, message: '请输入用户名', trigger: 'blur' },
        { min: 11, max: 11, message: '长度为11字符', trigger: 'blur' }
      ]
    }
  }),

十四、自定义邮箱和手机号的验证规则（此处我自己未使用）

1.在data中定义一个箭头函数用来自定义验证规则

image.png

2.在addFormRules中通过validator使用自定义的规则

image.png

十五、实现添加表单的重置操作

1.监听对话框的close事件:@close="addDialogClose"

    <!-- 弹出添加用户弹框 -->
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="30%"
      @close="addDialogClose"
    >

2.触发对话框的close事件后，通过调用resetFields方法，清空表单

    // 监听对话框dialog的关闭事件
    addDialogClose() {
      this.$refs.addFormRef.resetFields()
    }

十六、实现添加表单用户前的表单预验证

1.给确定按钮添加点击事件

<!-- 底部区域 -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addUser">确 定</el-button>
      </span>

2.实现点击事件

    // 点击添加用户
    addUser() {
      this.$refs.addFormRef.validate(valid => {
        // console.log(valid)
        if (!valid) return this.$message.error('验证不通过')
        this.$message.success('验证通过')
      })
    }

十七、调用api接口实现添加用户操作

    // 点击添加用户
    addUser() {
      this.$refs.addFormRef.validate(async valid => {
        // console.log(valid)
        if (!valid) return this.$message.error('验证不通过')
        // this.$message.success('验证通过')
        // 可以发起添加用户的网络请求
        const { data: res } = await this.$http.post('users', this.addForm)
        if (res.meta.status !== 201) {
          return this.$message.error('添加用户失败')
        }
        this.$message.success('添加用户成功')
        this.dialogVisible = false
        this.getUsersList()
      })
    }

十八、展示修改用户的对话框

1.引入dialog组件

    <!-- 弹出修改用户对话框 -->
    <el-dialog title="修改用户" :visible.sync="editdialogVisible" width="30%">
      <span>这是一段信息</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editdialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="editdialogVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>

2.将editdialogVisible放入data中，且为false（默认关闭对话框），用于控制对话框的显示隐藏，并为修改按钮添加点击事件，点击后设置editdialogVisible属性值为true（弹出对话框）

<!-- 编辑按钮 -->
          <el-button
            type="primary"
            icon="el-icon-edit"
            size="mini"
            @click="editUser"
          ></el-button>

    // 点击修改用户
    editUser() {
      this.editdialogVisible = true
    }

十九、根据id查询对应的用户信息

1.为用户列表中操作一栏添加template，并传递数据（id）

image.png

    <el-table-column prop="" label="操作" width="180px">
          <template slot-scope="scope">
            <!-- 编辑按钮 -->
            <el-button
              type="primary"
              icon="el-icon-edit"
              size="mini"
              @click="editUser(scope.row.id)"
            ></el-button>
            <!-- 删除按钮 -->
            <el-button
              type="danger"
              icon="el-icon-delete"
              size="mini"
            ></el-button>
            <!-- 设置按钮 -->
            <el-tooltip
              class="item"
              effect="dark"
              content="分配角色"
              placement="top"
              :enterable="false"
            >
              <el-button
                type="warning"
                icon="el-icon-setting"
                size="mini"
              ></el-button>
            </el-tooltip>
          </template>
        </el-table-column>

2.调用接口查询用户信息，并将查询到的信息保存到editForm中（editForm定义在data中，是一个数组）

//data中：
    // 查询到的用户信息
    editForm: []


        // 点击修改用户
    async editUser(id) {
      // console.log(id)
      const { data: res } = await this.$http.get('users/' + id)
      this.editForm = res.data
      console.log(this.editForm)
      this.editdialogVisible = true
    }

二十、渲染修改用户的表单

1.引入form组件，并修改其中的属性

    <el-form
        :model="editForm"
        :rules="editFormRules"
        ref="editFormRef"
        label-width="100px"
      >
        <el-form-item label="用户名">
          <el-input v-model="editForm.username" disabled></el-input>
        </el-form-item>
        <el-form-item label="手机号" prop="mobile">
          <el-input v-model="editForm.mobile"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="editForm.email"></el-input>
        </el-form-item>
      </el-form>

2. 在data中定义editForm，用来存放用户数据，定义editFormRules用来验证手机号码和邮箱（需要验证的el-form-item要有prop属性）

        // 修改
    // 查询到的用户信息
    editForm: {},
    editFormRules: {
      mobile: [
        { required: true, message: '请输入用户名', trigger: 'blur' },
        { min: 11, max: 11, message: '长度为11字符', trigger: 'blur' }
      ],
      email: [
        { required: true, message: '请输入邮箱地址', trigger: 'blur' },
        { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
      ]
    }

二十一、实现修改用户表单的重置（同上）

二十二、完成提交修改之前的表单验证（同上）

二十三、提交表单完成用户信息的修改

  • 修改后的数据都保存在editForm中
       // 点击修改用户
    editUserInfo() {
      this.$refs.editFormRef.validate(async valid => {
      // 预验证
        if (!valid) return this.$message.error('用户信息验证失败')
        // 发起修改用户信息的请求
        const { data: res } = await this.$http.put('users/' + this.editForm.id, { email: this.editForm.email, mobile: this.editForm.mobile })
        if (res.meta.status !== 200) return this.$message.error('修改用户信息失败')
        // 关闭对话框
        this.editdialogVisible = false
        // 重新获取用户信息列表
        this.getUsersList()
        // 提示修改用户信息成功
        return this.$message.success('修改用户信息成功！')
      })
    }

二十四、弹框询问是否确认删除用户

1. 添加删除事件

            <!-- 删除按钮 -->
            <el-button
              type="danger"
              icon="el-icon-delete"
              size="mini"
              @click="deleteUser(scope.row.id)"
            ></el-button>

2.实现删除事件

1. 引入$confirm组件，定义一个变量confirmResult用来存储触发删除函数后弹出的提示框中的取消和确认的值，如果点击取消，则confirmResult=cancel，如果点击确定，则confirmResult=confirm

image.png

2. 根据confirmResult的值进行不同的操作，如果confirmResult!==confirm，则显示已取消删除，如果confirmResult==confirm，则调用接口进行删除操作

       // 根据id删除用户信息
    async deleteUser(id) {
      const confirmResult = await this.$confirm('是否确认删除用户?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err => err)

      console.log(confirmResult)
      // 如果用户确认删除，则返回字符串confirm
      // 如果用户取消了删除，则返回字符串cancel
      if (confirmResult !== 'confirm') {
        return this.$message.info('已取消删除！')
      }

      const { data: res } = await this.$http.delete('users/' + id)
      if (res.meta.status !== 200) return this.$message.error('删除用户失败！')
      this.$message.success('删除用户成功！')
      this.getUsersList()
    }

二十五、创建user分支，并提交代码到远程仓库

    1. 开启一个新的终端
    1. git branch查看当前所处分支
    1. 创建user分支：git checkout -b user
    1. git branch查看当前所处分支
    1. git status查看状态
    1. git add . 添加到暂停区
    1. git commit -m '完成用户列表功能'：提交到仓库中
    1. git status查看状态
    1. 把本地的user分支推送到云端的user分支：git push -u origin user
    1. 切换到主分支：git checkout master
    1. 在主分支进行代码合并（合并user分支到master分支）：git merge user
    1. 提交到远程仓库：git push

image.png

二十六、渲染分配角色的对话框，并请求角色列表的数据

    1. 点击分配角色按钮弹出对话框
<!-- 设置按钮 -->
            <el-tooltip
              class="item"
              effect="dark"
              content="分配角色"
              placement="top"
              :enterable="false"
            >
              <el-button
                type="warning"
                icon="el-icon-setting"
                size="mini"
                @click="setRoles(scope.row)"
              ></el-button>
            </el-tooltip>

data中

    // 分配角色对话框的显示隐藏
    setRoledialogVisible: false

methods中

    // 分配角色
    setRoles(userInfo) {
      // 显示分配角色对话框
      this.setRoledialogVisible = true
    }
    1. 获取列表数据并渲染到对话框中
    // // 显示分配角色的对话框
    async setRoles(userInfo) {
      // 获取用户数据并存放到data中的userInfo
      this.userInfo = userInfo
      // 在展示对话框之前，获取所有角色的列表
      const { data: res } = await this.$http.get('roles')
      if (res.meta.status !== 200) {
        return this.$message.error('获取角色列表失败')
      }
      this.rolesList = res.data
      console.log(this.rolesList)
      // 显示分配角色对话框
      this.setRoledialogVisible = true
    }

data中

    // 获取到的用户列表数据，用来渲染到对话框中（需要被分配角色的用户的信息）
    userInfo: {}
    // 所有角色的数据列表
    rolesList: [],

将数据渲染到页面上

<!-- 分配角色对话框 -->
    <el-dialog
      title="分配角色"
      :visible.sync="setRoledialogVisible"
      width="30%"
    >
      <div>
        <p>用户名：{{ userInfo.username }}</p>
        <p>角色：{{ userInfo.role_name }}</p>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  • 渲染对话框中的选择角色部分
      1. 引入el-select组件（v-model：绑定下拉菜单中选中的角色名，即点击角色名后显示到select框中） data中：
        // 已选中的角色id
selectedRoleId: ''
    渲染： 
    <div>
    <p>用户名：{{ userInfo.username }}</p>
    <p>角色：{{ userInfo.role_name }}</p>
    <p>
      分配新角色：
      <el-select v-model="selectedRoleId" placeholder="请选择">
        <el-option
          v-for="item in rolesList"
          :key="item.id"
          :label="item.roleName"
          :value="item.id"
        >
        </el-option>
      </el-select>
    </p>
  </div>
    1. 完成分配角色的功能
      1. 给确定按钮添加事件 @click="saveRoleInfo"
        <!-- 分配角色对话框 -->
 <el-dialog
   title="分配角色"
   :visible.sync="setRoledialogVisible"
   width="40%"
 >
   <div>
     <p>用户名：{{ userInfo.username }}</p>
     <p>角色：{{ userInfo.role_name }}</p>
     <p>
       分配新角色：
       <el-select v-model="selectedRoleId" placeholder="请选择">
         <el-option
           v-for="item in rolesList"
           :key="item.id"
           :label="item.roleName"
           :value="item.id"
         >
         </el-option>
       </el-select>
     </p>
   </div>
   <span slot="footer" class="dialog-footer">
     <el-button @click="setRoledialogVisible = false">取 消</el-button>
     <el-button type="primary" @click="saveRoleInfo">确 定</el-button>
   </span>
 </el-dialog>
      1. 定义方法saveRoleInfo
    // 点击确定按钮，分配角色
 async saveRoleInfo() {
   if (!this.selectedRoleId) {
     return this.$message.error('请选择要分配的角色！')
   }
   const { data: res } = await this.$http.put(`users/${this.userInfo.id}/role`, {
     rid: this.selectedRoleId
   })
   console.log(res)
   if (res.meta.status !== 200) {
     return this.$message.error('更新角色失败！')
   }
   this.$message.success('更新角色成功！')
   this.getUsersList()
   this.setRoledialogVisible = false
 }
      1. 优化（在一次分配角色完成后，清空select框中的内容） 给对话框添加关闭事件
    <!-- 分配角色对话框 -->
 <el-dialog
   title="分配角色"
   :visible.sync="setRoledialogVisible"
   width="40%"
   @close="setRoleDialogClosed"
 >
    当对话框关闭时，清空选中的select中的角色名称以及用户信息 
        // 监听分配角色对话框的关闭事件
 setRoleDialogClosed() {
   this.selectedRoleId = ''
   this.userInfo = {}
 }
avatar
文章
阅读
粉丝