vben已封装表格进行升降序

最新推荐文章于 2024-01-15 15:40:38 发布
最新推荐文章于 2024-01-15 15:40:38 发布
阅读量317 收藏 1
点赞数
文章标签： vue.js 前端 js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/chenmomo_csdn/article/details/134434894
版权

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

表格组件

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

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

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

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

飞翔的菜小猪
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
vben admin框架sortFn排序使用
2302_76925238的博客
05-15 357
排序sortFn
vben BasicTable的查询条件和重置查询按钮的排序规则 以及RangePicker选择时间范围时如何处理
weixin_44227793的博客
06-27 1243
关于RangePicker的一些用法（限制日期范围）vben-admin并没有太懂，欢迎大佬纠错。
vben admin配置详解（Table, Form）
Web面试那些事儿的博客
12-16 3034
vben这个后台管理系统的框架，基于ant-design-vue组件库封装了很多好用的组件，我们在日常开发中用的最多的就是Table, Form组件了。下面就简单介绍一下。
【Vben Admin】
s_turnTurn的博客
07-28 2382
vben admin 随手记
vben admin表格筛选项默认值的处理
m0_71099325的博客
10-07 254
表格筛选项,默认值可以这样设置,
vben admin Table 实现表格列宽自由拖拽
小菜鸡的博客
01-15 886
最后TIPS:样式生效，但是如果表格列有排序，排序的触发事件放在表头的，所以拖动会触发本列的排序事件。第三步：找到Table组件中的useColumns.ts文件，将columnsRef抛出。第4步：在BasicTable组件中，引入第二步的文件，并配置在表格头的cell中。第二步：在列表中插入useTableHeadResizable.ts文件。另：仅有当column项的宽设了值后，才可以拖动宽的长短。一就是用鼠标右键进行拖动，避免触发click。二就是将排序的触发事件绑定在排序icon上。
vue-vben-admin.md
07-30
vue-vben-admin.md
Vue-Vben-Admin - 自定义上传excel文件弹框组件
09-27
这个组件允许用户选择并上传Excel文件，以便进行数据导入或其他需要处理Excel数据的操作。 在 Vue.js 中，组件是构建应用程序的基本单元，它们可以复用并且具有独立的功能。自定义上传组件通常包括文件选择、文件...
vben admin白名单配置
最新发布
03-20
在开发过程中，当我们采用Vben Admin框架进行项目构建时，可能会遇到一种情况：当其他系统试图通过iframe的方式集成我们的项目时，发现项目的路由URL会自动重定向至登录页面。这意味着用户必须先完成登录流程才能...
vue-vben-admin-main源码
12-19
6. **Vue-vben-admin特性**：Vue-vben-admin提供了诸如权限控制、多语言支持、动态路由、表格、表单等常见管理后台功能的实现，这些都是通过Vue.js的特性如组件、计算属性、监听器等实现的。 7. **Vue组件**：在`...
vue2+iview+webpack 和vue3+vben+vite的技术对比的ppt
07-31
标题：Vue2+IView+Webpack 与 Vue3+Vben+Vite 技术对比分析 内容概要： 这份PPT主要对比了基于Vue2的IView和Webpack技术栈与基于Vue3的Vben和Vite技术栈之间的差异，探讨了为何选择更新的技术和框架。报告中详细...
vben-Admin 框架--表格问题汇总
热门推荐
xiaofiy的博客
06-13 1万+
vben admin
vben admin BasicTable 表格的基本使用
YZRHANYU的博客
11-12 5097
vben admin BasicTable 表格的基本使用,其中表头数据和表单数据都是定义好直接拿来用的
十一、Vben框架部分组件样式的重新封装
张先森的博客
03-01 981
Vben框架部分组件样式的重新封装，如inputNumber带前后标志,select组件增加label返回
表格分页组件二次封装（vue-elementui）
Amouzy的博客
11-26 404
分页组件、 组件需用到的util、 在main.js里面进行全局组件挂载、 然后在需要用到的父组件直接引用
Vue-vben-admin Vue3+TS Axios的封装源码分析
weixin_50786692的博客
08-14 3275
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 1964
vben+admin框架中使用场景
vue vben admin 使用, (个人感觉这项目封装的太深了!!!!)
阿臻
03-30 5013
开启了表单搜索功能, demo 代码是 formtable 组件, 个人还是比较喜欢 template 方式, 这样的方式使用不了 getForm 这种方法。在请求方法里面重新返回一个 promise 对象, 用满足规定的格式返回就可以了。需要注意的是, 如果使用了组件表单搜索功能, 就是说你需要提供一个获取数据的api, 这里着重去看怎么适配表格需要的响应数据结构。建议表格这种东西使用 vben自己封装的, ant design 自身的还需要你去动态调整表格高度。我们是不会被困难打败的, 只会越战越勇!
vben admin表格排序
06-07
要对 vben admin 表格进行排序，可以在表格的配置项中设置 `sort` 属性。该属性可以设置为一个对象，对象包含两个属性： - `prop`：需要排序的列的字段名 - `order`：排序的顺序，可以是 `ascending`（升序）或 `descending`（降序） 例如，如果要对表格按照 `id` 字段进行升序排序，可以这样设置 `sort` 属性： ```html <template> <vben-table :columns="columns" :data="tableData" :sort="{ prop: 'id', order: 'ascending' }" /> </template> ``` 这样表格就会按照 `id` 字段进行升序排序。如果要切换到降序排序，可以在表头点击 `id` 列的排序按钮。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值