Vue 实现用户管理(展示用户列表功能)_vue展示users数据

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')
            }
        ]
    }
]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

实现用户管理=>用户列表的面包屑效果

<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

在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;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<!-- 卡片试图-->
    <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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

由于很多地方都要用到这个判断，可以定义一个全局的

if(res.meta.status !== 200){
return this.$message.error("获取用户列表失败")}
1
2

在vscode 文件=》首选项=>用户片段 定义一个代码片段

"element-message": {
		"scope": "javascript,typescript,vue",
		"prefix": "msg",
		"body": [
			"if(res.meta.status !== 200){",
                "    return this.\\$message.error('获取$1失败')",
            "}"
		],
		"description": "element-message"
	}
1
2
3
4
5
6
7
8
9
10

这样每次需要输入这个提示信息时直接输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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

返回的数据

{
    "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
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

<!-- 用户表格-->
      <!-- 一页有很多行，这个不用关心 会自动帮我们循环 -->
      <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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

完整代码

<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94

给表格设置全局样式

.el-table {
    margin-top: 15px;
    font-size: 12px;
}
1
2
3
4