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,一经查实,立即删除!

相关文章

机器学习的分类

机器学习分类 ​ 机器学习是人工智能的一个分支&#xff0c;它使计算机系统能够从数据中学习并做出决策或预测。机器学习&#xff08;Machine Learning&#xff09;是一种基于数据驱动的方法&#xff0c;旨在通过自动化的统计模型和算法从数据中学习和提取模式&#xff0c;以进…

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重新映射姿态数据 将姿态数据转发到…

DeepSORT(目标跟踪算法)中的状态向量与状态转移矩阵

DeepSORT&#xff08;目标跟踪算法&#xff09;中的状态向量与状态转移矩阵 flyfish 状态转移矩阵&#xff08;State Transition Matrix&#xff09;F的构造 这篇是一定要看的&#xff0c;拖到文章的最后部分&#xff0c;需要理解状态转移矩阵怎么来的&#xff0c;怎么是这个…

如何让 uboot启动时自动执行指令?(执行“mtdparts default”命令)

让uboot启动时自动设置分区&#xff08;执行“mtdparts default”命令&#xff09;&#xff0c;在uboot进入main_loop()死循环之前添加执行命令代码 run_command("mtdparts default", 0); #define MTDIDS_DEFAULT "nand0mini2440-nand" #define MTD…

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;我建议在选…

2563. 统计公平数对的数目

题目&#xff1a; 给你一个下标从 0 开始、长度为 n 的整数数组 nums &#xff0c;和两个整数 lower 和 upper &#xff0c;返回 公平数对的数目 。 如果 (i, j) 数对满足以下情况&#xff0c;则认为它是一个 公平数对 &#xff1a; 0 < i < j < n&#xff0c;且 l…

LeetCode 算法:轮转数组c++

原题链接&#x1f517;&#xff1a;轮转数组 难度&#xff1a;中等⭐️⭐️ 题目 给定一个整数数组 nums&#xff0c;将数组中的元素向右轮转 k 个位置&#xff0c;其中 k 是非负数。 示例 1: 输入: nums [1,2,3,4,5,6,7], k 3 输出: [5,6,7,1,2,3,4] 解释: 向右轮转 1 步…

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;中加上一行代码即可&#…

9.1.3 简单介绍单阶段模型YOLO、YOLOv2、YOLO9000、YOLOv3的发展过程

9.1.3 简单介绍单阶段模型YOLO、YOLOv2、YOLO9000、YOLOv3的发展过程 前情回顾&#xff1a;9.1.2 简单介绍两阶段模型R-CNN、SPPNet、Fast R-CNN、Faster R-CNN的发展过程 摘要 YOLOYOLOv2YOLO9000YOLOv3基本思想使用一个端到端的卷积神经网络直接预测目标的类别和位置针对YOL…

【源码】SpringBoot编程式事务使用及执行原理

Spring事务 1、【源码】SpringBoot事务注册原理 2、【源码】Spring Data JPA原理解析之事务注册原理 3、【源码】Spring Data JPA原理解析之事务执行原理 4、【源码】SpringBoot编程式事务使用及执行原理 前言 《Spring事务系列》的前面几篇博文讲解了通过Transactional注…

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

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