[Vue框架学习笔记]用户列表的搭建

如何创建并引入一个新组件

• 1.创建一个vue文件
• 2.在index.js中配置路由，有需要可以重定向，配置子路由等
• 3.在App.vue中添加路由占位符
• 4.如果有子路由，则需要在该路由中继续添加路由占位符

解决用户列表小问题

• 1.session记录下链接的激活状态
• 2.用activePath记录下激活路径保存在session中
• 3.在create生命周期中用activepath获取session中的activePath
• 4.用default-active激活上面获取的activepath

如何使用elements

• 1.找到elements需要使用的组件地方，复制代码
• 2.在elements.js中添加组件并挂载到vue上

面包屑导航

• 3.添加一个点击首页跳转路由，这个很简单了

• 4.同理再加一个卡片 注意，加载多个组件的时候要放在div下

• 5.编写css文件，注意这些组件名可以直接理解为class，要加’.’
  !important 优先执行
  

• 6.添加搜索框
  

• 7.添加一个布局和添加用户的按钮
  

• 8.获取用户列表信息

  • 1.async await快速获取promise对象
  • 2.判断meta.statues！==200
  • 3.在created生命周期中调用获取的方法
  • 4.使用到的变量在data()中需要定义

• 9.添加table绑定数据
  数据

  userList: [
        {
          id: 25,
          username: 'tige117',
          mobile: '186****3651',
          type: 1,
          email: 'tige112@163.com',
          create_time: '2017-11-09T20:36:26.000Z',
          mg_state: true, // 当前用户的状态
          role_name: '炒鸡管理员'
        },
        {
          id: 41,
          username: '41414141',
          mobile: '132****9938',
          type: 1,
          email: '229335832@qq.com',
          create_time: '2017-11-09T20:36:26.000Z',
          mg_state: true, // 当前用户的状态
          role_name: '炒鸡管理员'
        }
      ]

绑定

        <!-- 用户列表区域 -->
        <el-table :data="userList">
            <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>

• 10.添加状态框
  用到了slot-scope

<template slot-scope="scope">
                    <el-switch
                        v-model="scope.row.mg_state">
                    </el-switch>
</template>

• 11.添加图标按钮和提示文字

• 12.添加用户增加一个弹窗并渲染一个表格

搭建完界面，然后就是一些接口的调试

注意好入口的参数，直接访问接口获取data就可以了
前面的获取用户列表的函数是可以复用的

还有，再改变状态的时候put里面是用`隔开的