当前位置: 首页 > news >正文

SortTable.js + vxe-table 实现多条批量排序

环境: vue3+vxe-table+sorttable.js
功能: 实现表格拖动排序,支持单条排序,多条排序
实现思路: sorttable.js官网只有单条排序的例子,网上也都是简单的使用,想要实现多条排序,就要结合着表格的复选框功能,在对其勾选的行统一计算!
最终效果:
请添加图片描述
实现代码

<template>{{ gridOptions.data.map((item) => item.id) }}<VxeGrid ref="xGrid" v-bind="gridOptions" :data="demo1.tableData"><template #sortRow="{ row }"><span v-if="isSort(row)" class="drag-btn"><span v-if="row.sortDirection !== 'All'"><i :class="row.sortDirection"></i></span><span  v-else  style="display: inline-flex;flex-direction: column; height: 1.8em; vertical-align: middle;"><i class="vxe-icon-caret-up"></i><i class="vxe-icon-caret-down"></i></span></span></template><template #sortHeader><vxe-tooltipv-model="demo1.showHelpTip"content="按住后可以上下拖动排序!"enterable><i class="vxe-icon-question-circle-fill"@click="demo1.showHelpTip = !demo1.showHelpTip"></i></vxe-tooltip></template></VxeGrid>
</template>
<script lang="ts" setup>import { reactive, ref, onUnmounted, nextTick } from 'vue';import XEUtils from 'xe-utils';import { VxeGridInstance, VxeGridProps } from 'vxe-table';import Sortable from 'sortablejs';const xGrid = ref

相关文章:

  • 第 4 章:从 Spring Framework 到 Spring Boot
  • PyCharm设置不默认打开上次的项目
  • Android 调用系统相册、系统相机拍照
  • MyBatis进行模糊查询时SQL语句拼接引起的异常问题
  • kubeadm快速部署K8S
  • 长亭雷池部署
  • 【云岚到家】-day03-1-门户等缓存方案选择
  • Django DetailView视图
  • 如何将NextJs中的File docx保存到Prisma ORM
  • 奇思妙想-可以通过图片闻见味道的设计
  • 数据网格和视图入门
  • Windows Docker Desktop 安装 postgres
  • openstack搭建
  • 如何开发高效服务(C++ )
  • Java——LinkedList
  • “寒冬”下的金三银四跳槽季来了,帮你客观分析一下局面
  • CNN 在图像分割中的简史:从 R-CNN 到 Mask R-CNN
  • Docker: 容器互访的三种方式
  • Go 语言编译器的 //go: 详解
  • Javascript Math对象和Date对象常用方法详解
  • JSDuck 与 AngularJS 融合技巧
  • Js基础知识(四) - js运行原理与机制
  • KMP算法及优化
  • LeetCode29.两数相除 JavaScript
  • mysql_config not found
  • PHP那些事儿
  • socket.io+express实现聊天室的思考(三)
  • TCP拥塞控制
  • VirtualBox 安装过程中出现 Running VMs found 错误的解决过程
  • Vue 2.3、2.4 知识点小结
  • 从0到1:PostCSS 插件开发最佳实践
  • 从重复到重用
  • 排序(1):冒泡排序
  • 前端之React实战:创建跨平台的项目架构
  • 小试R空间处理新库sf
  • 一个6年java程序员的工作感悟,写给还在迷茫的你
  • 在GitHub多个账号上使用不同的SSH的配置方法
  • 掌握面试——弹出框的实现(一道题中包含布局/js设计模式)
  • AI又要和人类“对打”,Deepmind宣布《星战Ⅱ》即将开始 ...
  • #stm32驱动外设模块总结w5500模块
  • $var=htmlencode(“‘);alert(‘2“); 的个人理解
  • (10)Linux冯诺依曼结构操作系统的再次理解
  • (附源码)spring boot校园健康监测管理系统 毕业设计 151047
  • (附源码)springboot宠物管理系统 毕业设计 121654
  • (附源码)springboot人体健康检测微信小程序 毕业设计 012142
  • (佳作)两轮平衡小车(原理图、PCB、程序源码、BOM等)
  • (十五)Flask覆写wsgi_app函数实现自定义中间件
  • (四)Android布局类型(线性布局LinearLayout)
  • (四)linux文件内容查看
  • (一)使用Mybatis实现在student数据库中插入一个学生信息
  • (原创) cocos2dx使用Curl连接网络(客户端)
  • (转载)(官方)UE4--图像编程----着色器开发
  • *Django中的Ajax 纯js的书写样式1
  • .net core webapi 大文件上传到wwwroot文件夹
  • .net 重复调用webservice_Java RMI 远程调用详解,优劣势说明