## 通用分頁表格實現 前端基于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); } } ```