vxe-table 自定义排序筛选 后台排序筛选

最新推荐文章于 2024-08-22 14:38:56 发布
最新推荐文章于 2024-08-22 14:38:56 发布
阅读量3.5k 收藏 2
点赞数 4
分类专栏： 前端 文章标签： elementui 前端 easyui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_35011890/article/details/124020024
版权
本文记录了一位开发者在使用VXE-Table时遇到的问题，即由于前端已设定逻辑，导致默认的排序和筛选功能失效。通过查询参数传递给后台并自定义查询语句解决，实现了所有页码的数据排序和筛选。参考VXE-Table API进行问题解决。
摘要由CSDN通过智能技术生成

由于同事已经写好逻辑 前台传入页码，查询参数，获得数据
导致使用默认的sortable 无法所有页码的排序和筛选，
查了两天 发现网上没有类似的案例 记录下

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

在query方法里 把参数传给后台就行了 后台我使用的是判断然后查询语句拼接

vxe-table API：https://xuliangzhan_admin.gitee.io/vxe-table/#/table/base/sort

幼稚怪
关注
专栏目录
view Table 自定义排序
zhualao的博客
07-27 376
vue ivew table组件，前端排序，合并行（适用于不分页的表）
vxe-table vue表格解决方案 v4.5.20.zip
03-27
vxe-table是一款开源的Vue表格组件，它提供了丰富的表格功能，包括但不限于数据排序、筛选、分页、合并单元格、拖拽列宽、行列固定、自定义操作等。这个组件不仅易于集成到现有的Vue项目中，而且在性能优化方面也做...
vxetable列表远程排序的使用
weixin_45901950的博客
08-15 412
【代码】vxetable列表远程排序的使用。
功能强大易用的表格组件vxe-table
最新发布
mopmgerg54mo的博客
08-22 773
vxe-table是一个功能强大、性能卓越的Vue表格组件，它提供了丰富的功能和良好的用户体验，适用于各种复杂的表格应用场景。无论是开发数据管理平台、报表系统还是编辑系统，vxe-table都能为你提供强大的支持。t=N7T8vxe-table: vxe-table vue 表单/表格解决方案https://gitee.com/xuliangzhan/vxe-table。
vxe-grid\table 自定义动态列排序设置
onlylele的博客
08-10 2098
实现动态加载的表格数据，根据设置动态控制指定的某些字段排序功能；
【vxe-table】自定义表头列是否可以排序
花椒和蕊的博客
04-27 1329
我一开始的思路有点问题，我想着把这个showIcon改为false，是不是能解决，答案是不能，它控制的是一整个表头的排序图标是否显示或隐藏，这里卡了一下，然后翻看示例，发现column上有个sortable。vxe-table和el-table有个很大的区别，就是vex-table有很多的配置项，圈起来的sort-config就是排序配置项。今天给我提了个bug，vxe-table要支持指定列排序，意思就是根据某个字段的状态，符合状态的列可以排序，不符合的不允许排序。vxe-table封装成组件了。
vxe-table v4 列表自定义列配置（Promise缓存,拖动排序、置顶）
Zihuatanjo
10-19 8030
​ useCommonHooks==> 请求配置hooks(请求自定义列配置只会在此处触发一次,其余调用皆走缓存，除非主动清除缓存)(视频可见:getOne 即请求自定义配置接口只会触发一次，除非主动清楚缓存)​ queryHeaderOptions==> 递归请求表头下拉options。​ gridQueryRes==> 页面数据请求完毕。​ gridLoadColumns==> 加载列。​ gridMount==> 表格组件渲染钩子。​ routerDone==> 路由结束。
Vxe-table表格自定义筛选
weixin_50760181的博客
03-30 3000
需求：需要搜索筛选复选框在src/components新建FilterExtend.vue，内容如下。
vxe-table vue表格解决方案 v3.7.9.zip
04-02
对于计算机科学专业的学生，vxe-table可以作为毕业设计或论文项目的一部分，研究如何集成到实际项目中，优化性能，或者扩展新功能，如自定义插件、国际化支持等。 4. **软件工具** 作为一款开源的前端组件，vxe-...
vxe-table-plugin-menus::deciduous_tree: 基于 vxe-table 的表格插件，提供实用的快捷菜单集
04-13
vxe-table-plugin-menus 基于 的表格插件，提供实用的快捷菜单集 Installing npm install xe-utils vxe-table@next vxe-table-plugin-menus@next // ... import VXETable from 'vxe-table' import ...
vxe-table vue表格解决方案 v2.11.0.zip
03-27
vxe-table是一款基于Vue.js框架的高性能表格组件，它提供了丰富的功能和强大的自定义能力，能够满足各种复杂的数据展示需求。本文将对vxe-table 2.11.0版本进行深入解析，帮助开发者更好地理解和应用这个强大的表格...
vxe-table-v2.9.24_表格组件_Table_
09-28
8. **表单渲染**：vxe-table可以与Vue的表单组件配合，实现动态渲染表单，根据后台返回的字段结构自动生成表单，提高了开发效率。 9. **数据分页**：为了便于处理大量数据，vxe-table内置了分页功能，用户可以轻松...
vue3关于vxe-table可拖拽排序的自定义指令
shou_11的博客
11-13 1068
【代码】vue3关于vxe-table可拖拽排序的自定义指令。
vxe-table添加排序
weixin_51722520的博客
10-20 1039
vxe-table添加排序
vxe-table 根据后台参数返回列表排序踩坑！！！
Name_object的博客
03-27 889
关于vxe-table表格排序踩坑 vxe-table默认的是会打乱后台返回给你的list 导致根据后端参数排序的话是乱的 需要在表格里加一个参数。这样就是放弃vxe-table本来带有的纯前端的排序 这样后台返回给你什么列表就会展示什么 是按照后台的顺序给的 这样就不会乱掉了。
Vxe UI vxe-table 实现自定义列拖拽，列拖拽排序功能
我的博客
06-07 1460
Vxe UI vxe-table 实现自定义列拖拽，列拖拽排序功能
vxe-grid表格的排序功能
weixin_46394325的博客
05-30 983
vxe-grid表格实现排序功能
vxe-table开启服务端排序，并记录排序高亮状态
Y_seaboy的博客
02-03 1708
vxe-table 像el-table一样，开启服务端排序，并且记录排序高亮状态
vxe-table两个table做自定义筛选
Lella的博客
05-30 489
场景是这样的，页面有两个vxe-table，第二个vxe-table没有表头，然后第二个vxe-table筛选需要根据第一个vxe-table的表头进行展示，看了vxe的API没有找到合适的方法就自己对表头进行重写了。
vxe-table自定义插槽
01-24
Vxe-table是一个基于Vue的表格组件，它提供了丰富的插槽来自定义表格的外观和功能。下面是一个演示如何使用vxe-table的自定义插槽的例子： ```html <template> <vxe-table :data="tableData"> <!-- 自定义表头 --> <template #header> <tr> <th>姓名</th> <th>年龄</th> <th>性别</th> </tr> </template> <!-- 自定义表格内容 --> <template #body="{ row }"> <tr> <td>{{ row.name }}</td> <td>{{ row.age }}</td> <td>{{ row.gender }}</td> </tr> </template> <!-- 自定义底部 --> <template #footer> <tr> <td colspan="3">这是自定义的底部</td> </tr> </template> </vxe-table> </template> <script> import { VXETable } from 'vxe-table' import 'vxe-table/lib/style.css' export default { data() { return { tableData: [ { name: '张三', age: 20, gender: '男' }, { name: '李四', age: 25, gender: '女' }, { name: '王五', age: 30, gender: '男' } ] } }, mounted() { VXETable.setup({ table: { showHeader: false, // 隐藏默认表头 showFooter: true // 显示底部 } }) } } </script> ``` 在上面的例子中，我们使用了三个自定义插槽：`header`、`body`和`footer`。通过在`template`标签中使用`#`符号来指定插槽的名称。在每个插槽中，我们可以自定义表格的结构和内容。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值