【前端】Vue+Element UI案例：通用后台管理系统-用户管理：Table表格增删查改、Pagination分页、搜索框

上一篇： 【前端】Vue+Element UI案例：通用后台管理系统-用户管理：Form表单填写、Dialog对话框弹出

参考视频：VUE项目，VUE项目实战，vue后台管理系统，前端面试，前端面试项目

目标

总体是这样：

需求：本篇主要是Table表格增删查改、Pagination分页。上篇已经完成了表单、对话框弹出。

• 表格Table显示用户数据
• 用户数据由Mock随机生成，提供后端接口
• 删除：可以删除用户数据，弹出消息提示
• 搜索框：可以搜索用户数据
• 分页效果

代码

0.结构

上篇已经完成了提交功能，但由于现在还没有表格，不知道自己写的对不对。我们先迅速地用组件把表格写出来。

当el-table元素中注入data对象数组后，在el-table-column中用prop属性来对应对象中的键名即可填入数据，用label属性来定义表格的列名。可以使用width属性来定义列宽。

<div class="common-table">
  
  <el-table :data="tableData" stripe style="width: 100%">
    <el-table-column prop="name" label="姓名">
    el-table-column>
    <el-table-column prop="age" label="年龄">
    el-table-column>
    <el-table-column prop="sex" label="性别">
    el-table-column>
    <el-table-column prop="birth" label="出生日期">
    el-table-column>
    <el-table-column prop="addr" label="地址">
    el-table-column>
    
  el-table>
  
div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

效果：

我们先测试一下提交功能：

提交本身没问题，但细节有点问题：我们要规范一下出生日期的格式。

代码：添加value-format="yyyy-MM-DD"

<el-form-item label="出生日期">
  <el-form-item prop="birth">
    <el-date-picker type="date" placeholder="请选择日期" v-model="form.birth" value-format="yyyy-MM-DD">
    el-date-picker>
  el-form-item>
el-form-item>
1
2
3
4
5
6

1.按钮-删除

需求：

• 自定义列：列名操作
• 按钮：编辑、删除
• 点击后有弹窗

自定义列：

<el-table-column label="操作">
  <template slot-scope="scope">
    <el-button
      size="mini"
      @click="handleEdit(scope.$index, scope.row)">编辑el-button>
    <el-button
      size="mini"
      type="danger"
      @click="handleDelete(scope.$index, scope.row)">删除el-button>
  template>
el-table-column>
1
2
3
4
5
6
7
8
9
10
11

点击后的弹窗功能：

methods如下：

this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
  confirmButtonText: '确定',
  cancelButtonText: '取消',
  type: 'warning'
}).then(() => {
  this.$message({
    type: 'success',
    message: '删除成功!'
  });
}).catch(() => {
  this.$message({
    type: 'info',
    message: '已取消删除'
  });          
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

效果：删除数据+弹窗。

2.按钮-编辑

需求：

• 点击编辑后：打开表单
• 把当前用户信息填上去（深拷贝）

显然会调用update的接口。

表单有新建和编辑两种打开方式：

• 新建：打开空表单，左上角为“新建”，调用接口为create
• 编辑：打开表单，自动填进当前用户信息，左上角为“编辑”，调用接口为update

因此我们用一个变量modalType来表示是新建（0）还是编辑（1）。

代码：点击编辑按钮后标记modalType为1，打开表单，进行深拷贝。

// 编辑按钮
handleEdit(index) {
 this.modalType = 1
 this.openForm()
 // 深拷贝
 this.form = JSON.parse(JSON.stringify(index))
},
// 打开表单
openForm() {
 this.dialogVisible = true
}
1
2
3
4
5
6
7
8
9
10
11

接下来的逻辑判断就由submit来实现：若modalType为0，则新增；否则修改：

// 表单提交
submit() {
  // 要用箭头函数,若用function会报错,不知道为什么
  this.$refs.form.validate((valid) => {
    // 符合校验
    if (valid) {
      // 提交数据
      if (this.modalType === 0) {
        // 新增
        createUser(this.form).then(() => {
          this.getList()
        })
      } else {
        // 编辑
        updateUser(this.form).then(() => {
          this.getList()
        })
      }
      // 清空,关闭
      this.closeDialog()
    }
  })
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

效果：确实显示在了表单中。显然还有一些问题，比如日期显示的是错误的，性别显示的是数字。我们在下一节修改它。

3.debug

debug：

• 点击新建则表单左上角显示新建，点击编辑则表单左上角显示编辑
• 性别显示“男女”而非10

新建与编辑：

<el-dialog 
:title="modalType == 0 ? '新建' : '编辑'" 
:visible.sync="dialogVisible" 
width="50%" 
:before-close="closeDialog">
1
2
3
4
5

性别显示：

<el-table-column prop="sex" label="性别">
 <template slot-scope="scope">
   <span>{{ scope.row.sex == 1 ? '男' : '女' }}span>
 template>
el-table-column>
1
2
3
4
5

效果：在表格中的性别显示已经改过来了。至于为什么年龄匹配不上，且名为娟的会是男性…因为数据全是随机生成的（详见user.js中的mock.random）

但是出现了新的问题，点击编辑后自动填入的性别还是1和0，为什么呢？

原因：后端返回的数据中sex是integer(0,1)

for (let i = 0; i < count; i++) {
  List.push(
    Mock.mock({
      id: Mock.Random.guid(),
      name: Mock.Random.cname(),
      addr: Mock.mock('@county(true)'),
      'age|18-60': 1,
      birth: Mock.Random.date(),
      sex: Mock.Random.integer(0, 1)
    })
  )
}
1
2
3
4
5
6
7
8
9
10
11
12

而前端的表单中的value是String：

<el-form-item label="性别" prop="sex">
   <el-select v-model="form.sex" placeholder="请输入性别">
     <el-option label="男" value="1">el-option>
     <el-option label="女" value="0">el-option>
   el-select>
 el-form-item>
1
2
3
4
5
6

解决方法：动态绑定value，让它可以更改：

<el-option label="男" :value="1">el-option>
<el-option label="女" :value="0">el-option>
1
2

效果：

4.样式

当前样式：鼠标滚轮往下滑，可以看到表格的所有数据都显示在一页。许多数据会把table的高度撑的很大。我们要限制table的宽高。

在html中增加Attribute：height

<el-table 
:data="tableData" 
stripe 
style="width: 100%" 
height="90%">
1
2
3
4
5

这样会受控于外部样式，所以我们要给外部div也写上样式。

最大的div的高度占浏览器100%，common-table高度为父级的90%，于是el-table表格的高度为common-table的90%。

.manage {
  height: 100%;

  .common-table {
    height: 90%;
  }
}
1
2
3
4
5
6
7

效果：

5.分页Pagination：功能

<el-pagination
  layout="prev, pager, next"
  :total="1000">
el-pagination>
1
2
3
4

这只是结构，我们还要完成点击对应页码就跳转到对应Table页的效果：

参数为点击的页码：

// 改变页码
currentChange(val){
  console.log(val);
}
1
2
3
4

到这里我们可以确定：我们能通过currentChange获取到点击的页码，至于如何完成跳转呢？由于表格中显示哪些数据由getList这个函数决定，而getList又是由后端接口中的getUserList决定的： 我们可以看一下后端的接口文档。

/**
 * 获取列表
 * 要带参数 name, page, limt; name可以不填, page,limit有默认值。
 * @param name, page, limit
 * @return {{code: number, count: number, data: *[]}}
 */
getUserList: config => {
  const { name, page = 1, limit = 20 } = param2Obj(config.url)
  // console.log('name:' + name, 'page:' + page, '分页大小limit:' + limit)
  const mockList = List.filter(user => {
    if (name && user.name.indexOf(name) === -1 && user.addr.indexOf(name) === -1) return false
    return true
  })
  const pageList = mockList.filter((item, index) => index < limit * page && index >= limit * (page - 1))
  return {
    code: 20000,
    count: mockList.length,
    list: pageList
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

所以page页码数可以当作参数传给getUser。由注释可知：要带参数 name, page, limt; name可以不填, page,limit有默认值。显然传入的是一个对象。于是我们在data中定义这个对象：

• page：要展示第page页
• limit：每页limit条数据，这里是默认值

pageData:{
  page:1,
  limit:20
}
1
2
3
4

每次点击分页时就修改pageData.page，然后把它传给getUser。

// 获取列表数据
getList() {
  // 由接口文档知传入一个对象
  getUser({params:{...this.pageData}}).then((data) => {
    this.tableData = data.data.list
  })
}
1
2
3
4
5
6
7

效果：数据竟然消失了？

看一下控制台，原来错误出在：:8081/api/user/get?page=1&limit=20:1 Failed to load resource: the server responded with a status of 404 (Not Found)

由于我们之前定义的getUser是get方法，它的参数是会在url里的，而我们在mock里定义的：

Mock.mock('/api/user/get',user.getUserList)
1

是写死的，/api/user/get?page=1&limit=20与/api/user/get是匹配不上的！

解决方法：正则表达式。

Mock.mock(/\/api\/user\/get/,user.getUserList)
1

getList：

getList() {
 // 由接口文档知传入一个对象
 getUser({ params: { ...this.pageData } }).then((data) => {
   this.tableData = data.data.list
   this.total = data.data.count || 0
 })
}
1
2
3
4
5
6
7

改变页码：

// 改变页码
currentChange(val) {
  this.pageData.page = val
  this.getList()
}
1
2
3
4
5

效果：

第一页：

第三页：

6.分页Pagination：样式

右下角。子绝父相。

.common-table {
  height: 90%;
  position: relative;

  .pager {
    position: absolute;
    right:20px;
    bottom: 0;
  }
}
1
2
3
4
5
6
7
8
9
10

效果：（忽略搜索框！分页的样式是我最后写的…）

7.搜索框：功能

搜索框，但是用的是表单组件：

html：

<el-form>
  <el-form-item>
    <el-input v-model="searchForm.name" placeholder="请输入名称">el-input>
  el-form-item>
  <el-form-item>
    <el-button type="primary" @click="search">查询el-button>
  el-form-item>
el-form>
1
2
3
4
5
6
7
8

由于table显示的数据是本页数据+搜索到的数据的交集，我们要修改getList：

getList() {
 // 由接口文档知传入一个对象:要返回的是当前页面数据和搜索到的数据的交集
 getUser({ params: { ...this.pageData,...this.searchForm } }).then((data) => {
   this.tableData = data.data.list
   this.total = data.data.count || 0
 })
}
1
2
3
4
5
6
7

但凡触发了搜索事件：重新获取table数据即可。

search(){
  this.getList()
}
1
2
3

效果：

8.搜索框：样式

让新建按钮和搜索框并排：flex。
让搜索框的输入框和按钮并排：inline。

html：

<el-form :inline="true">
1

css：

.manage {
  height: 100%;

  .manage-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .common-table {
    height: 90%;
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13

效果：

总效果

总代码

修改和创建的文件

User.vue

<template>
  <div class="manage">
    <div class="manage-header">
      
      <el-button type="primary" @click="handlecreate">+ 新增el-button>

      
      
      <el-dialog :title="modalType == 0 ? '新建' : '编辑'" :visible.sync="dialogVisible" width="50%"
        :before-close="closeDialog">
        
        
        <el-form :inline="true" :model="form" :rules="rules" ref="form" label-width="80px">
          
          <el-form-item label="姓名" prop="name">
            <el-input placeholder="请输入姓名" v-model="form.name">el-input>
          el-form-item>

          <el-form-item label="年龄" prop="age">
            <el-input placeholder="请输入年龄" v-model="form.age">el-input>
          el-form-item>

          <el-form-item label="性别" prop="sex">
            <el-select v-model="form.sex" placeholder="请输入性别">
              <el-option label="男" :value="1">el-option>
              <el-option label="女" :value="0">el-option>
            el-select>
          el-form-item>

          <el-form-item label="出生日期">
            <el-form-item prop="birth">
              <el-date-picker type="date" placeholder="请选择日期" v-model="form.birth" value-format="yyyy-MM-DD">
              el-date-picker>
            el-form-item>
          el-form-item>

          <el-form-item label="地址" prop="addr">
            <el-input placeholder="请输入地址" v-model="form.addr">el-input>
          el-form-item>
        el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="closeDialog">取 消el-button>
          <el-button type="primary" @click="submit">确 定el-button>
        div>
      el-dialog>

      
      <el-form :inline="true">
        <el-form-item>
          <el-input v-model="searchForm.name" placeholder="请输入名称">el-input>
        el-form-item>
        <el-form-item>
          <el-button type="primary" @click="search">查询el-button>
        el-form-item>
      el-form>
    div>
    <div class="common-table">
      
      <el-table :data="tableData" stripe style="width: 100%" height="90%">
        <el-table-column prop="name" label="姓名">
        el-table-column>
        <el-table-column prop="age" label="年龄">
        el-table-column>
        <el-table-column prop="sex" label="性别">
          <template slot-scope="scope">
            <span>{{ scope.row.sex == 1 ? '男' : '女' }}span>
          template>
        el-table-column>
        <el-table-column prop="birth" label="出生日期">
        el-table-column>
        <el-table-column prop="addr" label="地址">
        el-table-column>
        
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button @click="handleEdit(scope.row)">编辑el-button>
            <el-button type="danger" @click="handleDelete(scope.row)">删除el-button>
          template>
        el-table-column>
      el-table>
      
      <div class="pager">
        <el-pagination layout="prev, pager, next" :total="total" @current-change="currentChange">
        el-pagination>
      div>
    div>
  div>
template>
  
<script>
import { getUser, createUser, deleteUser, updateUser } from '../api/index'
export default {
  data() {
    return {
      // 表单绑定的数据
      form: {
        name: '',
        age: '',
        sex: '',
        birth: '',
        addr: ''
      },
      // 表单验证规则
      rules: {
        name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
        age: [{ required: true, message: '请输入年龄', trigger: 'blur' }],
        sex: [{ required: true, message: '请输入性别', trigger: 'blur' }],
        birth: [{ required: true, message: '请输入日期', trigger: 'blur' }],
        addr: [{ required: true, message: '请输入地址', trigger: 'blur' }],
      },
      // 表单是否打开
      dialogVisible: false,
      // 列表数据
      tableData: [],
      // 打开表单:新建0,编辑1
      modalType: 0,
      // 分页的对象
      pageData: {
        page: 1,
        limit: 20
      },
      // 分页页数
      total: 0,
      // 搜索框表单
      searchForm: {
        name: ''
      }
    }
  },
  methods: {
    // 获取列表数据
    getList() {
      // 由接口文档知传入一个对象:要返回的是当前页面数据和搜索到的数据的交集
      getUser({ params: { ...this.pageData, ...this.searchForm } }).then((data) => {
        this.tableData = data.data.list
        this.total = data.data.count || 0
      })
    },
    // 表单提交
    submit() {
      // 要用箭头函数,若用function会报错,不知道为什么
      this.$refs.form.validate((valid) => {
        // 符合校验
        if (valid) {
          // 提交数据
          if (this.modalType === 0) {
            // 新增
            createUser(this.form).then(() => {
              this.getList()
            })
          } else {
            // 编辑
            updateUser(this.form).then(() => {
              this.getList()
            })
          }
          // 清空,关闭
          this.closeDialog()
        }
      })
    },
    // 关闭对话框
    closeDialog() {
      // 先重置
      this.$refs.form.resetFields()
      // 后关闭
      this.dialogVisible = false
    },
    // 编辑按钮
    handleEdit(index) {
      this.modalType = 1
      this.openForm()
      // 深拷贝
      this.form = JSON.parse(JSON.stringify(index))
    },
    // 删除按钮
    handleDelete(index) {
      this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 删除操作:根据后端接口,参数是对象,id是唯一标识符
        deleteUser({ id: index.id }).then(() => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          this.getList()
        });
      }).catch(() => {
        // 点击取消:不删除了
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    // 新建按钮
    handlecreate() {
      this.modalType = 0
      this.openForm()
    },
    // 打开表单
    openForm() {
      this.dialogVisible = true
    },
    // 改变页码
    currentChange(val) {
      this.pageData.page = val
      this.getList()
    },
    // 搜索
    search() {
      this.getList()
    }
  },
  mounted() {
    this.getList()
  }
}
script>
  
<style lang="less" scoped>
.manage {
  height: 100%;

  .manage-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .common-table {
    height: 90%;
    position: relative;

    .pager {
      position: absolute;
      right:20px;
      bottom: 0;
    }
  }
}
style>
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
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245

api下的index.js

import http from '../utils/request'

// 请求首页数据,直接把这个对象导出
export const getData = () => {
    // 返回一个promise
    return http.get('/home/getData')
}

// 下面四个:用户管理-后端-网络请求接口
export const getUser = (params) => {
    return http.get('/user/get/', params)
}

export const createUser = (data) => {
    return http.post('/user/create', data)
}

export const deleteUser = (data) => {
    return http.post('/user/del', data)
}

export const updateUser = (data) => {
    return http.post('/user/update', data)
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

api下的mock.js

import Mock from 'mockjs'
import homeMock from '../api/mockServe/home'
import user from './user'

// 定义mock拦截
Mock.mock('/api/home/getData',homeMock)

// 用户管理:增删查改
Mock.mock(/\/api\/user\/get/,user.getUserList)
Mock.mock('/api/user/create','post',user.createUser)
Mock.mock('/api/user/update','post',user.updateUser)
Mock.mock('/api/user/del','post',user.deleteUser)
1
2
3
4
5
6
7
8
9
10
11
12

api下的user.js

import Mock from 'mockjs'

// get请求从config.url获取参数，post从config.body中获取参数
function param2Obj (url) {
  const search = url.split('?')[1]
  if (!search) {
    return {}
  }
  return JSON.parse(
    '{"' +
    decodeURIComponent(search)
      .replace(/"/g, '\\"')
      .replace(/&/g, '","')
      .replace(/=/g, '":"') +
    '"}'
  )
}

let List = []
const count = 200

for (let i = 0; i < count; i++) {
  List.push(
    Mock.mock({
      id: Mock.Random.guid(),
      name: Mock.Random.cname(),
      addr: Mock.mock('@county(true)'),
      'age|18-60': 1,
      birth: Mock.Random.date(),
      sex: Mock.Random.integer(0, 1)
    })
  )
}

export default {
  /**
   * 获取列表
   * 要带参数 name, page, limt; name可以不填, page,limit有默认值。
   * @param name, page, limit
   * @return {{code: number, count: number, data: *[]}}
   */
  getUserList: config => {
    const { name, page = 1, limit = 20 } = param2Obj(config.url)
    // console.log('name:' + name, 'page:' + page, '分页大小limit:' + limit)
    const mockList = List.filter(user => {
      if (name && user.name.indexOf(name) === -1 && user.addr.indexOf(name) === -1) return false
      return true
    })
    const pageList = mockList.filter((item, index) => index < limit * page && index >= limit * (page - 1))
    return {
      code: 20000,
      count: mockList.length,
      list: pageList
    }
  },
  /**
   * 增加用户
   * @param name, addr, age, birth, sex
   * @return {{code: number, data: {message: string}}}
   */
  createUser: config => {
    const { name, addr, age, birth, sex } = JSON.parse(config.body)
    console.log(JSON.parse(config.body))
    List.unshift({
      id: Mock.Random.guid(),
      name: name,
      addr: addr,
      age: age,
      birth: birth,
      sex: sex
    })
    return {
      code: 20000,
      data: {
        message: '添加成功'
      }
    }
  },
  /**
   * 删除用户
   * @param id
   * @return {*}
   */
  deleteUser: config => {
    const { id } = JSON.parse(config.body)
    if (!id) {
      return {
        code: -999,
        message: '参数不正确'
      }
    } else {
      List = List.filter(u => u.id !== id)
      return {
        code: 20000,
        message: '删除成功'
      }
    }
  },
  /**
   * 批量删除
   * @param config
   * @return {{code: number, data: {message: string}}}
   */
  batchremove: config => {
    let { ids } = param2Obj(config.url)
    ids = ids.split(',')
    List = List.filter(u => !ids.includes(u.id))
    return {
      code: 20000,
      data: {
        message: '批量删除成功'
      }
    }
  },
  /**
   * 修改用户
   * @param id, name, addr, age, birth, sex
   * @return {{code: number, data: {message: string}}}
   */
  updateUser: config => {
    const { id, name, addr, age, birth, sex } = JSON.parse(config.body)
    const sex_num = parseInt(sex)
    List.some(u => {
      if (u.id === id) {
        u.name = name
        u.addr = addr
        u.age = age
        u.birth = birth
        u.sex = sex_num
        return true
      }
    })
    return {
      code: 20000,
      data: {
        message: '编辑成功'
      }
    }
  }
}
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
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140