vben已封装表格进行升降序

最新推荐文章于 2025-05-09 18:30:00 发布
原创 最新推荐文章于 2025-05-09 18:30:00 发布 · 697 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js #前端 #js

本文描述了在一个公司项目中，如何利用Vben的二次开发框架，通过预封装的API实现表格组件的排序功能。开发者通过在js文件中设置sorter字段并传递给后端，实现表格数据的动态排序。

前言：这个是我们公司的项目使用的是vben的二次开发嘛，然后内部已经有很多封装好的api，比如这个排序。

表格组件

一般我们的表格组件是这样的，然后我们在书写的时候，会把内部的数据维护在另一个js文件里，如下

然后我只需要加个sorter: true,字段即可，在想进行排序的表格对象里添加这个字段，然后相对应的表头就会有那个排序的功能

这个时候，我们点击相对于的icon，就会进行请求并且多出一个请求字段，只需要把这个字段给到后端，让他们根据字段进行升降序排序即可

日常记录，不喜勿喷，谢谢！！！

十一、Vben框架部分组件样式的重新封装
张先森的博客
03-01 1262
Vben框架部分组件样式的重新封装，如inputNumber带前后标志,select组件增加label返回
如何实现 vben-Admin 表格的完美分页？揭秘数据带参数的处理技巧！
快来一起学习前端知识把！加油，前端人
09-12 568
【代码】vben-Admin 表格分页处理 表格数据带参数请求，对分页的处理。
vben admin框架sortFn排序使用
2302_76925238的博客
05-15 906
排序sortFn
vben admin配置详解（Table, Form）
Web面试那些事儿的博客
12-16 8220
vben这个后台管理系统的框架，基于ant-design-vue组件库封装了很多好用的组件，我们在日常开发中用的最多的就是Table, Form组件了。下面就简单介绍一下。
vben BasicTable的查询条件和重置查询按钮的排序规则 以及RangePicker选择时间范围时如何处理
weixin_44227793的博客
06-27 1839
关于RangePicker的一些用法（限制日期范围）vben-admin并没有太懂，欢迎大佬纠错。
Vben admin - 表格组件合并单元格
xiaofiy的博客
10-27 1559
合并单元格
Vben：表格的表头和表格的内容对不齐，以及解决方法
yyyyyyyyyyy_9的博客
07-05 671
基于Vue-Vbne-admin框架进行前端开发的时候，调用表格useTable函数实现表格之后，发现表格的表头和表格的内容对不齐。如下图所示。针对这种情况，本文记录了解决方法。
vben admin BasicTable 表格组件
m0_58537749的博客
03-28 1122
感觉挺好用的，组件很多，要学的也有很多，一直不太会使用组件，希望多加学习最后轻松使用。
Vben Admin—— vben-admin BasicTable表格 按钮权限控制的两种方式
qq_43201350的博客
12-14 751
Vben Admin—— vben-admin BasicTable表格 按钮权限控制的两种方式
vue vben admin 使用, (个人感觉这项目封装的太深了!!!!)
阿臻
03-30 9514
开启了表单搜索功能, demo 代码是 formtable 组件, 个人还是比较喜欢 template 方式, 这样的方式使用不了 getForm 这种方法。在请求方法里面重新返回一个 promise 对象, 用满足规定的格式返回就可以了。需要注意的是, 如果使用了组件表单搜索功能, 就是说你需要提供一个获取数据的api, 这里着重去看怎么适配表格需要的响应数据结构。建议表格这种东西使用 vben自己封装的, ant design 自身的还需要你去动态调整表格高度。我们是不会被困难打败的, 只会越战越勇!
表格分页组件二次封装（vue-elementui）
Amouzy的博客
11-26 529
分页组件、 组件需用到的util、 在main.js里面进行全局组件挂载、 然后在需要用到的父组件直接引用
Vben Admin框架 table的使用以及相关的内容
热门推荐
grayandwhite的博客
09-21 1万+
Vben Admin 框架学习总结
通过组件reload（）方法表单刷新第一次点击按钮无法刷新
destiny1234544的博客
11-11 758
想要解决这个问题可以将reload延迟执行，这样就可以在先将表格展示出来后在进行刷新操作达到切换表格的效果。
Vue-vben-admin Vue3+TS Axios的封装源码分析
weixin_50786692的博客
08-14 3721
Vue-vben-admin Vue3+TS Axios的封装源码分析 前言 一、近期再用Vue3+TS 重构之前Vue2的项目，因此想着借鉴一下业界较为优秀的代码，在Git上面找了好久，经过同事推荐，我发现由anncwd出品的Vue-vben-admin是很不错的，截止目前在git上面已经有5.9k个star了，目前将这个模板看完了，我觉得里面写的最好的莫过于对于Axios的封装了，在此我简单对这个源码进行一个分析，里面也涉及一些TS+Vue3的知识点，最重要的是，能够发现其中写的特别优秀的地方，我们也可
基于Vben+Admin+Ts+AntDesign+vite+Vue3框架遇到的问题，以及组件的使用
WhoopD的博客
08-24 4189
vben+admin框架中使用场景
vben admin 中 BasicTable 组件 useTable 的使用
YZRHANYU的博客
11-12 5208
vben admin 中 BasicTable 组件 useTable 的使用
vue-template-admin框架table组件在列表编辑排序
最新发布
luquinn的博客
05-09 163
【代码】vue-template-admin框架table组件在列表编辑排序。
Web前端之Vue+Element+select实现多选、两个数组排序、保持源数据、查找索引、过滤、克隆、复制、findIndex、filter
优快云博客主页地址：https://mengjian.blog.youkuaiyun.com/
08-21 2318
Web前端之Vue+Element+select实现多选、两个数组排序、保持源数据、查找索引、过滤、克隆、复制、findIndex、filter
vben admin重置表格方法
11-28
Vben Admin是一个基于Vue.js开发的后台管理框架，它提供了一套完整的权限管理系统和UI组件。当你需要重置Vben Admin中的表格数据时，通常会在与数据库交互的方法中实现这个功能。这里假设你正在使用的是API接口来操作数据。 例如，在Node.js和Express环境中，你可以创建一个用于重置表格的POST请求，比如`/api/admin/table/reset`： ```javascript // 假设你有一个TableService来处理数据库操作 import TableService from '@/services/TableService'; router.post('/admin/table/reset', async (req, res) => { try { // 验证并获取需要重置的表名或者其他必要参数 const tableName = req.body.tableName; // 使用TableService来删除所有记录 await TableService.deleteAll(tableName); // 如果操作成功，返回响应告知用户已重置 res.json({ message: '表格数据已成功重置' }); } catch (error) { res.status(500).json({ error: '重置表格失败，请检查网络或联系管理员' }); } }); ``` 在前端，你可以通过发送AJAX请求到这个API来触发重置操作： ```vue <button @click="resetTable">重置表格</button> methods: { async resetTable() { await axios.post('/api/admin/table/reset', { tableName: 'your_table_name' }).then(response => { console.log(response.data); }).catch(error => { console.error(error); }); } } ```
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值