通用分页表格 · mall4j

## 通用分页表格实现前端基于VUE的轻量级表格插件 `avue` 后端分页组件使用Mybatis分页插件 `MybatisPlus` > 分页实现流程，以【系统管理-管理员列表】为例后台vue文件位置目录 `\src\views\modules\sys\user.vue` 1、`avue`组件的几个通用配置 ```html <avue-crud ref="crud" :page="page" :data="dataList" :option="tableOption" @search-change="searchChange" @selection-change="selectionChange" @on-load="getDataList"> </avue-crud> ``` `avue`定义了很多的事件，其中一个为 `@on-load`当该组件加载的时候，将会调用该方法。同时也对很多数据进行了双向绑定如：`:page="page"` 分页参数、`:data="dataList"` 分页的具体列表数据、`:option="tableOption"` 表格显示的列 2、通用的列表、搜索在`avue`规定，表格的构建，是通过JS对象，进行配置的，而不是通过dom，类似于传统的layui，还有一个主要的原因是这个表格，可以同时生成搜索、分页。 ```javascript import { tableOption } from '@/crud/sys/user' ``` 我们查看下该类的代码： ```javascript export const tableOption = { border: true, selection: true, index: false, indexLabel: '序号', stripe: true, menuAlign: 'center', menuWidth: 350, align: 'center', refreshBtn: true, searchSize: 'mini', addBtn: false, editBtn: false, delBtn: false, viewBtn: false, props: { label: 'label', value: 'value' }, column: [{ label: '用户名', prop: 'username', search: true }, { label: '邮箱', prop: 'email' }, { label: '手机号', prop: 'mobile' }, { label: '创建时间', prop: 'createTime' }, { label: '状态', prop: 'status', type: 'select', dicData: [ { label: '禁用', value: 0 }, { label: '正常', value: 1 } ] }] } ``` 这里的 `search: true` 也就是搜索框出现用户名搜索 ```javascript { label: '用户名', prop: 'username', search: true } ``` 具体可以通过[avue官网-crud文档](https://avuejs.com/doc/crud/crud-doc)获取文档进行查询 3、通用的搜索和加载 ```javascript getDataList (page, params) { this.dataListLoading = true this.$http({ url: this.$http.adornUrl('/sys/user/page'), method: 'get', params: this.$http.adornParams( Object.assign( { current: page == null ? this.page.currentPage : page.currentPage, size: page == null ? this.page.pageSize : page.pageSize }, params ) ) }).then(({ data }) => { this.dataList = data.records this.page.total = data.total this.dataListLoading = false }) } ``` 4、服务端`SysUserController` ```java @RestController @RequestMapping("/sys/user") public class SysUserController { @Autowired private SysUserService sysUserService; /** * 所有用户列表 */ @GetMapping("/page") @PreAuthorize("@pms.hasPermission('sys:user:page')") public ResponseEntity<IPage<SysUser>> page(String username,PageParam<SysUser> page){ IPage<SysUser> sysUserPage = sysUserService.page(page, new LambdaQueryWrapper<SysUser>() .eq(SysUser::getShopId, SecurityUtils.getSysUser().getShopId()) .like(StrUtil.isNotBlank(username), SysUser::getUsername, username)); return ResponseEntity.ok(sysUserPage); } } ```