神思者 ·上个小节，我们写好了查询部门分页的后端代码，本小节我们来完成前端部分的设计。
我们首先看一下模型层定义的变量，除了有查询条件之外，还有与分页相关的变量，以及保存勾选的部门记录的变量，最后是表单验证的规则。总体上来看，跟用户管理页面的模型层差不多。
data: function() { return { dataForm: { deptName: null }, dataList: [], pageIndex: 1, pageSize: 10, totalCount: 0, dataListLoading: false, dataListSelections: [], addOrUpdateVisible: false, dataRule: { deptName: [ { required: false, pattern: '^[a-zA-Z0-9\u4e00-\u9fa5]{1,10}$', message: '部门名称格式错误' } ] } }; },代码块预览 复制
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
接下来我们看看前端页面的表单控件是怎么定义的。当用户点击查询按钮的时候，触发点击事件对应的回调函数是searchHandle()，这个函数是我们一会儿要声明的。
<el-form :inline="true" :model="dataForm" :rules="dataRule" ref="dataForm"> <el-form-item prop="deptName"> <el-input v-model="dataForm.deptName" placeholder="部门名称" size="medium" class="input" clearable="clearable" /> </el-form-item> <el-form-item> <el-button size="medium" type="primary" @click="searchHandle()">查询</el-button> <el-button size="medium" type="primary" :disabled="!isAuth(['ROOT', 'DEPT:INSERT'])" @click="addHandle()" > 新增 </el-button> <el-button size="medium" type="danger" :disabled="!isAuth(['ROOT', 'DEPT:DELETE'])" @click="deleteHandle()" > 批量删除 </el-button> </el-form-item> </el-form>代码块预览 复制
- 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
Ajax查询出来的数据要显示在表格控件中，我们来看看表格控件的代码。
<el-table :data="dataList" border v-loading="dataListLoading" @selection-change="selectionChangeHandle" cell-style="padding: 4px 0" size="medium" style="width: 100%;" > <el-table-column type="selection" :selectable="selectable" header-align="center" align="center" width="50" /> <el-table-column type="index" header-align="center" align="center" width="100" label="序号"> <template #default="scope"> <span>{{ (pageIndex - 1) * pageSize + scope.$index + 1 }}</span> </template> </el-table-column> <el-table-column prop="deptName" header-align="center" align="center" label="部门名称" min-width="170" /> <el-table-column prop="tel" header-align="center" align="center" label="联系电话" min-width="170" /> <el-table-column prop="email" header-align="center" align="center" label="邮箱" min-width="270" /> <el-table-column header-align="center" align="center" label="员工数量" min-width="140"> <template #default="scope"> <span>{{ scope.row.emps }}人</span> </template> </el-table-column> <el-table-column prop="desc" header-align="center" align="center" label="备注" min-width="400" /> <el-table-column header-align="center" align="center" width="150" label="操作"> <template #default="scope"> <el-button type="text" size="medium" :disabled="!isAuth(['ROOT', 'DEPT:UPDATE'])" @click="updateHandle(scope.row.id)" > 修改 </el-button> <el-button type="text" size="medium" :disabled="!isAuth(['ROOT', 'DEPT:DELETE']) || scope.row.emps > 0" @click="deleteHandle(scope.row.id)" > 删除 </el-button> </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
- 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
分页控件跟用户管理页面也差不多，基本上本项目所有页面的分页控件写法都是类似的。
<el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" :current-page="pageIndex" :page-sizes="[10, 20, 50]" :page-size="pageSize" :total="totalCount" layout="total, sizes, prev, pager, next, jumper" ></el-pagination>代码块预览 复制
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
大家看好了，这才是你要写的代码，我们在dept.vue页面中，声明加载部门数据的封装方法。
loadDataList: function() { let that = this; that.dataListLoading = true; let data = { deptName: that.dataForm.deptName, page: that.pageIndex, length: that.pageSize }; that.$http('dept/searchDeptByPage', 'POST', data, true, function(resp) { let page = resp.page; that.dataList = page.list; that.totalCount = page.totalCount; that.dataListLoading = false; }); },代码块预览 复制
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
然后在本页面的生命周期函数create()中调用loadDataList()，实现进入页面就在表格中加载无条件查询的第一页部门记录。
created: function() { this.loadDataList(); }代码块预览 复制
- 1
- 2
- 3
为分页控件设置翻页和改变显示记录数量的回调函数。
<el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" :current-page="pageIndex" :page-sizes="[10, 20, 50]" :page-size="pageSize" :total="totalCount" layout="total, sizes, prev, pager, next, jumper" ></el-pagination>代码块预览 复制
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
sizeChangeHandle: function(val) { this.pageSize = val; this.pageIndex = 1; this.loadDataList(); }, currentChangeHandle: function(val) { this.pageIndex = val; this.loadDataList(); },代码块预览 复制
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
我们声明查询按钮点击事件对应的回调函数，写完这个函数大家就可以运行前后端项目，测试一下数据的查询和分页效果。
searchHandle: function() { this.$refs['dataForm'].validate(valid => { if (valid) { this.$refs['dataForm'].clearValidate(); if (this.dataForm.deptName == '') { this.dataForm.deptName = null; } if (this.pageIndex != 1) { this.pageIndex = 1; } this.loadDataList(); } else { return false; } }); },代码块预览 复制
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
2025 imooc.com All Rights Reserved |