如何创建并引入一个新组件
- 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里面是用`隔开的