element ui table+分页 筛选全部数据-demo

本文详细介绍了如何使用 Element UI 的表格组件进行数据展示和筛选操作,包括设置表格样式、加载状态提示、监听筛选事件以及后端数据获取等关键功能。通过具体实例,展示了如何利用 Vue.js 的响应式特性实现表格数据的动态加载和过滤。

原文链接:http://www.jianshu.com/p/86411f0fac57
<el-table
:data=“tableData”
highlight-current-row
v-loading=“listLoading”
element-loading-text=“请稍后…”
style=“width: 100%;”
@filter-change=“filterTagTable”
>




已回答
未回答




查看详情
删除



data(){
return {
filterStatus: [{ text: “已回答”, value: 1 }, { text: “未回答”, value: 0 }],
listQuery:{
status:’’
}
}
},
methods:{
filterTagTable(filters){
if(filters.aStatus){
this.listQuery.status = filters.aStatus[0]
}
this.getAll() // 筛选所选项下的所有数据,需要调用后端接口

<think>我们使用Element UI作为前端框架,MyBatis-Plus作为后端ORM框架来实现分页功能。主要步骤包括: 1. 前端使用Element UI的Pagination组件传递分页参数(当前页码、每页条数)和查询条件(如果有) 2. 后端使用MyBatis-Plus的分页插件接收分页参数,并构造分页查询 3. 后端返回分页数据(包括记录列表和总记录数)给前端 4. 前端渲染分页数据和表格 具体步骤: 一、后端配置(Spring Boot + MyBatis-Plus) 1. 添加MyBatis-Plus分页插件配置类(如果尚未配置): 引用[2]中提供了配置类示例,我们创建一个配置类,配置分页插件。 2. 在Service层实现分页查询方法: 使用MyBatis-Plus提供的`Page`对象和`QueryWrapper`来构建分页查询条件。 二、前端配置(Vue + Element UI) 1. 在表格组件下方放置`el-pagination`组件,并绑定相关事件和属性。 2. 在Vue组件的data中定义分页参数(当前页、每页条数、总记录数)和查询条件。 3. 在methods中定义获取分页数据的方法,通过API请求后端数据。 三、前后端交互 前端通过API将分页参数(当前页码、每页条数)和查询条件(如果有)传递给后端,后端返回分页数据(记录列表和总记录数)。 下面我们详细说明每一步: 后端代码示例: 1. 配置分页插件(参考引用[2]): ```java @Configuration public class MybatisPlusConfig { @Bean public PaginationInterceptor paginationInterceptor() { PaginationInterceptor paginationInterceptor = new PaginationInterceptor(); // 设置请求的页面大于最大页后操作, true调回到首页,false 继续请求 默认false // paginationInterceptor.setOverflow(false); // 设置最大单页限制数量,默认 500 条,-1 不受限制 // paginationInterceptor.setLimit(500); // 开启 count 的 join 优化,只针对部分 left join paginationInterceptor.setCountSqlParser(new JsqlParserCountOptimize(true)); return paginationInterceptor; } } ``` 2. 在Service层实现分页查询(参考引用[3]): ```java @Service public class UserServiceImpl implements UserService { @Autowired private UserMapper userMapper; @Override public Page<User> getPageByIdOrEmailOrAddress(Integer pageNum, Integer pageSize, String uid, String username, String email) { // 创建分页对象,参数为当前页和每页条数 Page<User> page = new Page<>(pageNum, pageSize); // 创建条件构造器 QueryWrapper<User> wrapper = new QueryWrapper<>(); if (StringUtils.isNotBlank(uid)) { wrapper.like("uid", uid); } if (StringUtils.isNotBlank(username)) { wrapper.like("uname", username); } if (StringUtils.isNotBlank(email)) { wrapper.like("email", email); } // 执行分页查询 return userMapper.selectPage(page, wrapper); } } ``` 注意:这里使用了`Page`和`QueryWrapper`,其中`Page`对象包含了分页信息,查询后会将分页结果(记录列表和总记录数)设置到该对象中。 3. Controller层接收请求并调用Service: ```java @RestController @RequestMapping("/user") public class UserController { @Autowired private UserService userService; @GetMapping("/page") public Result<Page<User>> getUserPage( @RequestParam(value = "pageNum", defaultValue = "1") Integer pageNum, @RequestParam(value = "pageSize", defaultValue = "10") Integer pageSize, @RequestParam(value = "uid", required = false) String uid, @RequestParam(value = "username", required = false) String username, @RequestParam(value = "email", required = false) String email) { Page<User> page = userService.getPageByIdOrEmailOrAddress(pageNum, pageSize, uid, username, email); return Result.success(page); } } ``` 前端代码示例(Vue + Element UI): 1. 在表格和分页组件的模板中: ```vue <template> <div> <!-- 搜索表单(可选) --> <el-form :inline="true" :model="searchForm" class="demo-form-inline"> <el-form-item label="用户名"> <el-input v-model="searchForm.username" placeholder="用户名"></el-input> </el-form-item> <el-form-item> <el-button type="primary" @click="onSearch">查询</el-button> </el-form-item> </el-form> <!-- 表格 --> <el-table :data="tableData" style="width: 100%"> <el-table-column prop="uid" label="用户ID"></el-table-column> <el-table-column prop="username" label="用户名"></el-table-column> <el-table-column prop="email" label="邮箱"></el-table-column> </el-table> <!-- 分页 --> <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total"> </el-pagination> </div> </template> ``` 2. 在Vue组件的data和methods中: ```javascript export default { data() { return { tableData: [], // 表格数据 currentPage: 1, // 当前页码 pageSize: 10, // 每页条数 total: 0, // 总记录数 searchForm: { // 查询条件 uid: '', username: '', email: '' } }; }, methods: { // 获取分页数据 getPageData() { const params = { pageNum: this.currentPage, pageSize: this.pageSize, ...this.searchForm // 将查询条件一起传递 }; // 调用API this.$http.get('/user/page', { params }).then(res => { const result = res.data; if (result.code === 200) { this.tableData = result.data.records; // 当前页记录 this.total = result.data.total; // 总记录数 } }); }, // 每页条数改变 handleSizeChange(val) { this.pageSize = val; this.getPageData(); }, // 当前页码改变 handleCurrentChange(val) { this.currentPage = val; this.getPageData(); }, // 查询按钮 onSearch() { this.currentPage = 1; // 重置为第一页 this.getPageData(); } }, mounted() { // 初始化第一页数据 this.getPageData(); } }; ``` 这样,我们就实现了基本的分页功能。当用户改变页码、每页条数或者点击查询时,都会重新获取数据并更新表格。 注意:以上代码是简化示例,实际项目中可能需要根据具体业务调整。 相关问题: 1. 如何优化MyBatis-Plus的分页查询性能? 2. 在Element UI分页组件中,如何实现跳转到指定页码? 3. 如何在后端处理分页查询时的排序需求?</think>以下是使用 Element UI 和 MyBatis-Plus 实现分页功能的完整业务逻辑步骤,结合前后端协同开发的最佳实践: --- ### 一、后端实现(Spring Boot + MyBatis-Plus) #### 1. 添加分页插件配置 ```java @Configuration public class MybatisPlusConfig { @Bean public PaginationInterceptor paginationInterceptor() { PaginationInterceptor interceptor = new PaginationInterceptor(); // 设置最大单页限制(可选) interceptor.setLimit(1000); return interceptor; } } ``` [^2] #### 2. Service层实现分页查询 ```java @Service public class UserServiceImpl implements UserService { @Autowired private UserMapper userMapper; @Override public Page<User> getPage(int pageNum, int pageSize, String keyword) { // 1. 创建分页对象 Page<User> page = new Page<>(pageNum, pageSize); // 2. 构建查询条件 QueryWrapper<User> wrapper = new QueryWrapper<>(); if (StringUtils.isNotBlank(keyword)) { wrapper.like("name", keyword) // 字段名需与数据库一致 .or().like("email", keyword); } wrapper.orderByDesc("create_time"); // 排序条件 // 3. 执行分页查询 return userMapper.selectPage(page, wrapper); } } ``` [^3] #### 3. Controller层返回分页数据 ```java @RestController @RequestMapping("/user") public class UserController { @Autowired private UserService userService; @GetMapping("/page") public Result<Page<User>> getPage( @RequestParam(defaultValue = "1") int pageNum, @RequestParam(defaultValue = "10") int pageSize, @RequestParam(required = false) String keyword) { Page<User> page = userService.getPage(pageNum, pageSize, keyword); return Result.success(page); // 统一返回封装 } } ``` --- ### 二、前端实现(Vue + Element UI) #### 1. 安装依赖 ```bash npm install element-ui axios ``` #### 2. 分页组件与表格绑定 ```vue <template> <div> <!-- 搜索框 --> <el-input v-model="keyword" placeholder="输入关键词" @keyup.enter="loadData" /> <el-button @click="loadData">搜索</el-button> <!-- 数据表格 --> <el-table :data="tableData" border> <el-table-column prop="id" label="ID" /> <el-table-column prop="name" label="姓名" /> <el-table-column prop="email" label="邮箱" /> </el-table> <!-- 分页控件 --> <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[10, 20, 50]" :page-size="pageSize" layout="total, sizes, prev, pager, next" :total="total"> </el-pagination> </div> </template> ``` #### 3. Vue逻辑实现 ```javascript export default { data() { return { tableData: [], // 表格数据 currentPage: 1, // 当前页码 pageSize: 10, // 每页条数 total: 0, // 总记录数 keyword: '' // 搜索关键词 }; }, mounted() { this.loadData(); }, methods: { // 加载分页数据 async loadData() { const params = { pageNum: this.currentPage, pageSize: this.pageSize, keyword: this.keyword }; const res = await this.$axios.get('/user/page', { params }); this.tableData = res.data.records; // 当前页数据 this.total = res.data.total; // 总记录数 }, // 每页条数变化 handleSizeChange(val) { this.pageSize = val; this.loadData(); }, // 页码变化 handleCurrentChange(val) { this.currentPage = val; this.loadData(); } } }; ``` --- ### 关键点说明 1. **分页数据流** ```mermaid graph LR A[前端请求] --> B[pageNum/pageSize/keyword] B --> C[Controller接收参数] C --> D[Service构建Page对象] D --> E[MyBatis-Plus分页查询] E --> F[返回Page<Entity>] F --> G[前端渲染表格] ``` 2. **核心组件作用** - **MyBatis-Plus PaginationInterceptor**:自动拦截SQL添加`LIMIT`分页语句 - **Page对象**:封装分页参数和查询结果(含`records`数据和`total`总数) - **QueryWrapper**:动态构建查询条件(支持链式调用) - **Element UI Pagination**:通过`@size-change`和`@current-change`事件联动数据加载 3. **性能优化建议** - 避免`select *`,在QueryWrapper中使用`.select("id", "name")`指定字段 -数据量时开启`count`优化:`paginationInterceptor.setCountSqlParser(...)` - 前端添加防抖处理搜索请求(可使用lodash.debounce) --- ### 相关问题 1. 如何实现MyBatis-Plus的多表联合分页查询? 2. Element UI分页组件如何实现跨页数据选中状态保持? 3. 后端分页接口设计时应考虑哪些安全防护措施? 4. MyBatis-Plus的分页原理与传统PageHelper有何区别? 5. 如何处理前端分页参数传递时的类型验证问题? > 以上实现基于MyBatis-Plus 3.x和Element UI 2.x版本,具体参数需根据实际业务调整。查询条件构建可参考[^3],分页配置详见[^2],复杂SQL分页可结合XML映射[^4]。
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值