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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/26657.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

PCIE的吞吐量如何计算和记忆诀窍?

简介&#xff1a; PCIe标准中的性能参数有好几个&#xff0c;比如设备的带宽和吞吐量是多少&#xff1f;传输速率&#xff1f; 百度百科上&#xff0c;PCIE标准的传输速率与带宽对应表如下&#xff08;表中速率为单向速率&#xff09;。网上有些数据是双向的&#xff0c;性能数…

2024面试自动化测试面试题【含答案+文档】

&#x1f345; 点击文末小卡片&#xff0c;免费获取软件测试全套资料&#xff0c;资料在手&#xff0c;涨薪更快 1、你做了几年的测试、自动化测试&#xff0c;说一下 selenium 的原理是什么&#xff1f; 我做了五年的测试&#xff0c;1年的自动化测试&#xff1b; selenium …

怎么把日常的文件做二维码?适用excel、word、pdf制作二维码的方法

文件转换成二维码是将文件转成一个链接&#xff0c;将链接做成二维码之后&#xff0c;扫码就可以访问该链接中的文件内容&#xff0c;通过这种方式来实现文件的快速分享。将文件生成二维码能够随时修改内容&#xff0c;可以更新替换当前文件&#xff0c;不断的通过一个二维码来…

【开发环境】PX4无人机实物使用视觉或运动捕捉系统进行位置估计

PX4无人机实物使用视觉或运动捕捉系统进行位置估计 PX4中关于外部位置信息的MAVLink话题参考坐标系EKF2调整配置参数调整EKF2_EV_DELAY参数 与ROS共同使用将OptiTrack MoCap系统提供的姿态数据导入ROSMotive MoCap软件的步骤将姿态数据导入ROS重新映射姿态数据 将姿态数据转发到…

Solr7.4.0报错org.apache.solr.common.SolrException

文章目录 org.apache.solr.common.SolrException: Exception writing document id MATERIAL-99598435990497269125316 to the index; possible analysis error: cannot change DocValues type from NUMERIC to SORTED_NUMERIC for field "opt_time"Exception writing…

无法在地址[localhost]和端口[8005]上创建服务器关闭套接字(基本端口[8005]和偏移量[0])

今天小伙伴问我一个问题&#xff0c;说是新服务器启动应用&#xff0c;报了一个错误&#xff0c;如下&#xff1a; 一开始我怀疑是端口被占用 经过排查端口没有被占用&#xff0c;然后我怀疑localhost解析有问题 经过 ping localhost 后&#xff0c;得到以下结果到这里很明…

场外期权能不能开户?场外期权在哪里开?

今天带你了解场外期权能不能开户&#xff1f;场外期权在哪里开&#xff1f;近年来&#xff0c;场外期权交易在金融市场上逐渐盛行起来。有许多人对于场外期权的开户问题感到困惑。 场外期权能不能开户&#xff1f; 资质要求&#xff1a; 个人投资者需要具备一定的金融知识和投…

(三十九)Vue之集中式的状态管理机制Vuex

目录 概念vuex的核心概念State&#xff08;状态&#xff09;Getters&#xff08;获取器&#xff09;Mutations&#xff08;突变&#xff09;Actions&#xff08;动作&#xff09; 搭建vuex环境基本使用getters的使用 上一篇&#xff1a;&#xff08;三十八&#xff09;Vue之插槽…

ASCII码表介绍

一、ASCII码是什么 ASCII&#xff08;American Standard Code for Information Interchange&#xff0c;美国信息交换标准代码&#xff09;是基于拉丁字母的一套电脑编码系统。它可分为基于7位二进制数的标准版本和基于8位二进制数的扩展版本&#xff0c;标准版本主要用于显示现…

CANable USB转CAN适配器固件的安装(ubuntu20.04)

CANable USB转CAN适配器固件和驱动的安装(以candlelight和pcan为例)ubuntu20.04 candlelight candlelight是什么 Candlelight是CANable设备的固件之一&#xff0c;用于将CANable设备转换为本机CAN设备&#xff0c;无需使用slcand。它允许CANable设备直接在Linux系统上以本机C…

南卡、漫步者和Oladance开放式耳机哪个强!无广甄选测评!

在当前市场上&#xff0c;因为许多质量不行&#xff0c;音质平平的开放式耳机让消费者的选择陷入了困难。这些品质低下的产品既无法提供优秀的音频享受&#xff0c;长期佩戴还可能对使用者的听力健康造成健康问题。 作为一名经验丰富的音频设备评测专家&#xff0c;我建议在选…

Yolo-World训练过程中使用wandb进行可视化

训练过程可视化有两种方式&#xff1a;wandb和tensorboard&#xff0c;这里我采用的是wandb&#xff0c;想要在训练过程中调用wandb只需要在要训练的配置文件&#xff08;如yolo_world_v2_l_vlpan_bn_sgd_1e-3_40e_8gpus_finetune_coco.py&#xff09;中加上一行代码即可&#…

FPGA - 滤波器 - FIR滤波器设计

一&#xff0c;数字滤波器 滤波器是一种用来减少或消除干扰的器件&#xff0c;其功能是对输入信号进行过滤处理得到所需的信号。滤波器最常见的用法是对特定频率的频点或该频点以外的频率信号进行有效滤除&#xff0c;从而实现消除干扰、获取某特定频率信号的功能。一种更广泛的…

如何高效管理和监控 Elasticsearch 别名及索引?

0、引言 在 Elasticsearch 项目中&#xff0c;管理和监控索引是开发者的一项重要任务。 尤其是当我们需要在项目的管理部分展示索引和别名的统计信息时&#xff0c;了解如何有效地列出这些别名和索引显得尤为重要。 本篇博客将介绍几种在 Elasticsearch 中列出别名和索引的方法…

【Hudi】核心概念-基本概念

目录 基本概念时间轴(TimeLine)Instant action:在表上执行的操作类型Instant timeState两个时间概念 文件布局(File Layout)索引(Index)原理索引选项全局索引与非全局索引索引的选择策略 表类型(Table Types)查询类型Snapshot QueriesIncremental QueriesRead Optimized Querie…

【2024最新精简版】Redis面试篇

文章目录 什么是红锁Redis有哪些框架&#xff1f;你们项目中哪里用到了Redis ?Redis的常用数据类型有哪些 ?Redis的数据持久化策略有哪些 ?Redis的数据过期策略有哪些 ?Redis的数据淘汰策略有哪些 ?你们使用Redis是单点还是集群 ? 哪种集群 ?Redis集群有哪些方案, 知道嘛…

iOS--oc对象,类,和元类本质

iOS--oc对象&#xff0c;类&#xff0c;和元类本质 前言实例对象的具体结构自定义类对象的结构继承关系 类信息的存放对isa、superclass总结 前言 最近在学习runtime的过程中&#xff0c;发现其中消息发送-动态方法解析-消息转发中涉及到了大量的类与对象的底层知识&#xff0…

java.nio.charset.UnmappableCharacterException

问题 java.lang.IllegalArgumentException: java.nio.charset.UnmappableCharacterException: Input length 1 解释为编码转换有问题 问题错在位置 非汉字存在 打包的时候就会报异常

meilisearch的分页

Elasticsearch 做为老牌搜索引擎&#xff0c;功能基本满足&#xff0c;但复杂&#xff0c;重量级&#xff0c;适合大数据量。 MeiliSearch 设计目标针对数据在 500GB 左右的搜索需求&#xff0c;极快&#xff0c;单文件&#xff0c;超轻量。 所以&#xff0c;对于中小型项目来说…

人生感悟 | 我们为什么贫穷?

哈喽&#xff0c;你好啊&#xff0c;我是雷工&#xff01; 我们为什么贫穷&#xff1f; 因为我们都在局中并坦然的按着规则制定者循规蹈矩的生活。 01 负债导致贫穷 最近同事买房&#xff0c;总价一百多万&#xff0c;月供四千多&#xff0c;讲话&#xff1a;已入坑&#xff0…