Vue前端项目-用户管理-显示用户列表(上)

目录

1、用户管理页面

2、导入相关的 element-ui 组件

3、查询用户列表API

4、全局挂载方法

5、添加日期范围方法

6、定义分页组件

7、scroll-to 文件

8、未完成部分

9、Controller层

10、Service层

11、Service的 impl

12、Mapper接口

13、Mapper接口映射描述文件

---

实现效果图：

1、用户管理页面

在 src / views / system / user / index.vue 中，在创建组件时，调用查询方法获取用户列表数据

<template>
  <div class="">
    <!-- 用户管理列表 -->
    <el-table :data="userList">
      <el-table-column type="selection" width="40" align="center" />
      <el-table-column label="用户编号" align="center" prop="userId" />
      <el-table-column label="用户名称" align="center" prop="userName" />
      <el-table-column label="用户昵称" align="center" prop="nickName"  />
      <el-table-column label="部门" align="center" prop="dept.deptName"  />
      <el-table-column label="手机号码" align="center" prop="phonenumber" width="120" />
    </el-table>
    <!-- 分页组件 -->
    <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" 
:limit.sync="queryParams.pageSize" @pagination="getList" />
  </div>
</template>

<script type="text/ecmascript-6">
import { listUser } from '@/api/system/user'
export default {
  name: '',
  data() {
    return {
      // 用户表格数据
      userList: null,
      // 总条数
      total: 0,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        userName: undefined,
        phonenumber: undefined,
        status: undefined,
        deptId: undefined
      },
      // 日期范围
      dateRange: []
    }
  },
  components: {},
  methods: {
    /** 查询用户列表 */
    getList() {
      // addDateRange 方法在 main.js中全局挂载
      listUser(this.addDateRange(this.queryParams, this.dateRange)).then(
        response => {
          this.userList = response.rows
          this.total = response.total
          // this.loading = false;
        }
      )
    }
  },
  created() {
    this.getList()
  }
}
</script>

<style lang="scss" scoped>
</style>

 

2、导入相关的 element-ui 组件

在 src / plugins / elements.js 文件中

import { Table, TableColumn, Pagination } from 'element-ui'

Vue.use(Table)
Vue.use(TableColumn)
Vue.use(Pagination)

3、查询用户列表API

创建 src / api / system / user.js 文件