Vue 实现用户管理(展示用户列表功能)
components下新建user文件夹,user下新建User.vueindex.js中配置路由(注意在home页面下)const routes = [// 访问根路径的时候跳转到login{path: '/',redirect: '/login'},{path: '/login',component: Login},{path: '/home',.
·
components下新建user文件夹,user下新建User.vue
index.js中配置路由(注意在home页面下)
const routes = [
// 访问根路径的时候跳转到login
{
path: '/',
redirect: '/login'
},
{
path: '/login',
component: Login
},
{
path: '/home',
component: () =>
import ('../components/Home.vue'),
redirect: '/welcome',
children: [{
path: '/welcome',
component: () =>
import ('../components/index/Welcome.vue')
},
{
path: '/users',
component: () =>
import ('../components/user/User.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>
card
</el-card>
</div>
</template>
<script>
export default {};
</script>
在global.css中设置全局样式(面包屑和卡片)
html,
body,
#app {
margin: 0;
padding: 0;
height: 100%;
min-width: 1366px;
}
.el-breadcrumb {
font-size: 12px;
margin-bottom: 15px;
}
.el-card {
box-shadow: 0 1px 1px rgba(0, 0, 0, .15) !important;
}
<!-- 卡片试图-->
<el-card>
<!-- 搜索和添加 -->
<!-- gutter每列之间的间隔 槽宽 -->
<el-row :gutter="20">
<el-col :span="8">
<el-input
placeholder="请输入内容"
class="input-with-select"
>
<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>
<script>
export default {
data(){
return{
// 查询用户列表的参数对象
queryInfo:{
query:'',
pagenum:1,//页码
pagesize:5,// 页大小
},
// 用户列表数据
users:[]
}
},
created(){
this.getUserList()
},
methods:{
async getUserList(){
const {data:res} = await this.$http.get('users',{
params:this.queryInfo
})
if(res.meta.status !== 200){
return this.$message.error("获取用户列表失败")
}
console.log(res)
}
}
};
</script>
由于很多地方都要用到这个判断，可以定义一个全局的
if(res.meta.status !== 200){
return this.$message.error("获取用户列表失败")}
在vscode 文件=》首选项=>用户片段 定义一个代码片段
"element-message": {
"scope": "javascript,typescript,vue",
"prefix": "msg",
"body": [
"if(res.meta.status !== 200){",
" return this.\\$message.error('获取$1失败')",
"}"
],
"description": "element-message"
}
这样每次需要输入这个提示信息时直接输msg就可以出来了
<script>
export default {
data(){
return{
// 查询用户列表的参数对象
queryInfo:{
query:'',
pagenum:1,//页码
pagesize:5,// 页大小
},
// 用户列表数据
userList:[]
}
},
created(){
this.getUserList()
},
methods:{
async getUserList(){
const {data:res} = await this.$http.get('users',{
params:this.queryInfo
})
if(res.meta.status !== 200){
return this.$message.error('获取失败')
}
this.userList = res.data.users
console.log(this.userList)
}
}
};
</script>
返回的数据
{
"data": {
"total": 5,
"pagenum": 1,
"users": [
{
"id": 25,
"username": "tom",
"mobile": "13951783475",
"type": 1,
"email": "1049901079@qq.com",
"create_time": "2020-11-09T20:36:26.000Z",
"mg_state": true, // 当前用户的状态
"role_name": "超级管理员"
}
]
},
"meta": {
"msg": "获取成功",
"status": 200
}
}
<!-- 用户表格-->
<!-- 一页有很多行，这个不用关心 会自动帮我们循环 -->
<el-table :data="userList">
<el-table-column prop="username" label="姓名"> </el-table-column>
<el-table-column prop="email" label="邮箱"> </el-table-column>
<el-table-column prop="mobile" label="电话"> </el-table-column>
<el-table-column prop="role_name" label="角色"> </el-table-column>
<el-table-column label="状态">
<!--自定义模板 使用作用域插槽,通过scope.row获取当前行数据-->
<template slot-scope="scope">
<div>
<el-switch
v-model="scope.row.mg_state"
>
</el-switch>
</div>
</template>
</el-table-column>
</el-table>
完整代码
<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>
<!-- 搜索和添加 -->
<!-- gutter每列之间的间隔 槽宽 -->
<el-row :gutter="20">
<el-col :span="8">
<el-input placeholder="请输入内容" class="input-with-select">
<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>
<!-- 用户表格-->
<!-- 一页有很多行，这个不用关心 会自动帮我们循环 stripe隔行展示 -->
<el-table :data="userList" border stripe>
<!-- type="index" 会自动排序 -->
<el-table-column type="index" label="索引"> </el-table-column>
<el-table-column prop="username" label="姓名"> </el-table-column>
<el-table-column prop="email" label="邮箱"> </el-table-column>
<el-table-column prop="mobile" label="电话"> </el-table-column>
<el-table-column prop="role_name" label="角色"> </el-table-column>
<el-table-column label="状态">
<!--自定义模板 使用作用域插槽,通过scope.row获取当前行数据-->
<template slot-scope="scope">
<div>
<el-switch
v-model="scope.row.mg_state"
>
</el-switch>
</div>
</template>
</el-table-column>
<el-table-column label="操作">
<!-- enterable 文字是否可以移入提示信息，默认是可以的 -->
<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 effect="dark" placement="top" content="分配角色" :enterable='false'>
<el-button type="warning" icon="el-icon-setting" size="mini"></el-button>
</el-tooltip>
</el-table-column>
</el-table>
</el-card>
</div>
</template>
<script>
export default {
data() {
return {
// 查询用户列表的参数对象
queryInfo: {
query: "",
pagenum: 1, //页码
pagesize: 5, // 页大小
},
// 用户列表数据
userList: [],
};
},
created() {
this.getUserList();
},
methods: {
async getUserList() {
const { data: res } = await this.$http.get("users", {
params: this.queryInfo,
});
if (res.meta.status !== 200) {
return this.$message.error("获取失败");
}
this.userList = res.data.users;
console.log(this.userList);
},
},
};
</script>
给表格设置全局样式
.el-table {
margin-top: 15px;
font-size: 12px;
}
前往低代码交流专区
更多推荐
0
0- 0
已为社区贡献11条内容
所有评论(0)