Vue2 + element-ui后台管理项目—用户管理

---

一、用户列表

1.新建用户列表组件

在Components文件夹下新建user文件夹，在user文件夹下创建用户管理组件 Users.vue，在router/index.js中导入路由组件并在home这个路由规则的children属性中把user作为一个子规则定义进来

//router/index.js
import Users from '../components/user/Users.vue'

const router = new VueRouter({index.js
  routes: [
    { path: '/', redirect: '/mylogin' },
    { path: '/mylogin', component: myLogin },
    {
      path: '/home',
      component: Home,
      redirect: '/welcome',
      children: [
        { path: '/welcome', component: Welcome },
        { path: '/users', component: Users }
      ]
    }
  ]
})

2.解决点击用户列表链接未高亮问题

点击链接的时候把对应的地址保存在sessionstorage中，当下一次刷新页面时把值取出来动态赋值给default-active属性，
所以给二级菜单el-menu-item绑定单击事件 @click="saveNavState('/' + subItem.path)"
定义函数：

// 保存链接的激活状态
    saveNavState (activePath) {
      window.sessionStorage.setItem('activePath', activePath)
    }

此时点击用户列表链接sessionStorage中就出现了键：activePath，值为 /users

在data中定义数据保存激活的链接

// 被激活的链接地址
      activePath: ''

把地址动态绑定到el-menu上

:default-active="activePath"

给activePath动态赋值，应当是整个home组件被创建的时候就立即从sessionStorage把值取出来，组件被创建的时候执行created生命周期函数，所以在created中获取

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

最后注意在点击不同菜单链接时应该立即为activePath重新赋值

saveNavState (activePath) {
      window.sessionStorage.setItem('activePath', activePath)
      this.activePath = activePath
    }

3.绘制用户列表基本UI结构

• 标题使用element-ui中Breadcrumb面包屑组件,在element.js导入对应的组件并注册 ，
• 下面主体视图使用Card卡片组件

<!-- 面包屑导航区域 -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>用户管理</el-breadcrumb-item>
        <el-breadcrumb-item>用户列表</el-breadcrumb-item>
        </el-breadcrumb>

注意接下来的样式都写到assets/css/global.css里面
使用类选择器修改el-card样式需要再加上!important提高权重，否则会按照el-card原样式渲染，将卡片阴影修改轻一些

/* assets/css/global.css */
.el-breadcrumb {
    margin-bottom: 15px; /* 面包屑和卡片视图之间距离 */
    font-size: 12px;
}
.el-card { 
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15) !important; 
}

• 搜索与添加区域
  使用input输入框-带搜索的输入框设置搜索输入框
  
  使用Layout栅格布局设置搜索框和按钮之间的固定宽度
  
  其中 :span 用来指定每个格子的宽度，全行宽为24
  :gutter 用来指定每个格子之间的距离

        <!-- 卡片视图区域 -->
        <el-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>

4.获取用户列表数据

在发起数据请求之前先定义一些基本代码结构：当前组件的持有数据，生命周期函数created，节点methods用来定义当前组件的事件处理函数
在created生命周期函数中发起当前组件的首屏数据请求，通过this调用函数getUserList

  created () {
    this.getUserList()
  },

在methods中定义getUserList函数，通过this调用$http的get函数发起一个get请求，查看API 文档里请求方法路径和参数

methods: {
    getUserList () {
      this.$http.get('users', {
        params:
      })

由于有三个参数写在params里太繁琐，所以定义一个参数对象queryInfo

      queryInfo: {
        query: '',
        pagenum: 1,
        pagesize: 2
      },

接下来get对象会返回一个promise函数，用async await简化promise操作，从数据对象身上解构赋值出data属性 重命名res，根据状态码判断是否获取成功

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

获取成功后，在data里保存userlist和数据总数total

      userlist: [],
      total: 0

接下来为它们赋值

      this.userlist = res.data.users
      this.total = res.data.total

5.渲染用户列表数据

渲染使用table表格组件，先在ui结构区域开辟用户列表区域，创建一个表格和一行，再将table和tablecolumn进行按需导入并注册为全局组件

            <!-- 用户列表区域 -->
            <el-table>
              <el-table-column></el-table-column>
            </el-table>

为表格导入数据源，用label指定标题，用prop来指定标题对应的值，在API接口文档中查找

给table加一个border属性设置边框，stripe属性设置斑马纹

            <el-table :data="userlist" border:true stripe>
              <el-table-column label="姓名" prop="username"></el-table-column>
              <el-table-column label="邮箱" prop="email"></el-table-column>
              <el-table-column label="电话" prop="mobile"></el-table-column>
              <el-table-column label="角色" prop="role_name"></el-table-column>
              <el-table-column label="状态" prop="mg_state"></el-table-column>
              <el-table-column label="操作"></el-table-column>
            </el-table>

global.css里设置样式 表格和头部之间有间距

.el-table {
    margin-top: 15px;
    font-size: 12px;
}

前面添加一行，设置索引列

<el-table-column type="index"></el-table-column>

目前效果：

6.改造状态列和操作列的显示效果

在API接口文档里状态数据是一个布尔值，无法显示在页面上，因此需要改造一下，当布尔值是true的时候开关为打开状态，布尔值为false时开关为关闭状态，此时需要定义作用域插槽

              <el-table-column label="状态" prop="mg_state">
                <template slot-scope="scope">
                    {{ scope.row }}
                </template>
              </el-table-column>

用switch开关组件添加开关 el-switch组件带一个v-model双向绑定，将开关和数据进行关联，然后删掉prop，如果同时指定prop和作用域插槽那作用域插槽会覆盖prop，最后删掉 {{ scope.row }}

              <el-table-column label="状态">
                <template slot-scope="scope">
                    <el-switch v-model="scope.row.mg_state">
                    </el-switch>
                </template>
              </el-table-column>

利用button按钮里的图标按钮给操作列添加三个按钮，先定义作用域插槽，再添加修改 删除 分配角色按钮，将按钮的size属性设置为mini，操作这一列宽度不够，直接行内设置一下

              <el-table-column label="操作" width="210px">
                <template slot-scope="">
                  <!-- 修改按钮 -->
                  <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-button type="warning" icon="el-icon-setting" size="mini"></el-button>
                </template>
              </el-table-column>

分配角色按钮图标无法直观认出，所以希望鼠标放在按钮上时能有一个提示