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

news2025/2/2 3:52:35

环境: 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-tooltip
                 v-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.coloradmin.cn/o/1815214.html

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

相关文章

PointNet论文导读

PointNet论文导读 关键点&#xff1a;网络结构输入数据特点&#xff1a;网络关键模块&#xff1a; 关键点&#xff1a; 1.设计一个新颖的网络来处理无序的点云数据&#xff1b; 2.pointnet网络可以被训练用来处理分类、部件分割和场景分割多种任务&#xff1b; 3.提供了数据…

WordPress模板推荐

WordPress外贸主题 wordpress跨境电商独立站主题&#xff0c;wordpress外贸建站模板。 手机配件wordpress外贸网站模板 充电器、移动电源、手机膜、手机电池、手机壳、手机转接头等手机配件wordpress外贸网站模板。 毛巾WordPress外贸主题 毛巾、面巾、婴童毛巾、浴巾、方巾、…

【云原生】Kubernetes----Helm包管理器

目录 引言 一、Helm概述 1.Helm价值概述 2.Helm的基本概念 3.Helm名词介绍 二、安装Helm 1.下载二进制包 2.部署Helm环境 3.添加补全信息 三、使用Helm部署服务 1.创建chart 2.查看文件信息 3.安装chart 4.卸载chart 5.自定义chart服务部署 6.版本升级 7.版本…

微软Win11 22H2/23H2六月更新补丁KB5039212发布!附完整更新日志

系统之家于6月12日发出最新报道&#xff0c;微软向Win11用户推出六月更新补丁KB5039212&#xff0c;22H2版本号升为22621.3737&#xff0c;23H2版本号升为22631.3737。此次更新解决了可能导致系统无法从休眠状态恢复等问题。感兴趣的用户可以继续阅读以下内容&#xff0c;获取更…

项目太大导致报错:JavaScript堆内存已满

1.问题 启动一个Vue项目的时候遇到了如下的报错 Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory 无效的标记压缩导致接近了堆上限&#xff0c;分配失败 - JavaScript内存不足 2.解决方法 我查阅了网上的资料&#xff0c;似乎…

服装服饰展示预约小程序的效果是什么

服装作为生活必需品&#xff0c;其品牌大众小众类别非常多&#xff0c;大街小巷经销店/小摊贩等&#xff0c;线上线下竞争激烈且客户选择性广&#xff0c;尤其是厂商或连锁品牌&#xff0c;在宣传获客转化等方面都需要不断找寻渠道。 通常线上流量比之线下更容易获取&#xff…

Ubuntu server 24 (Linux) 安装客户端(windows/linux) Zabbix 7.0 LTS Zabbix agent2

一 Ubuntu(linux)安装客户端 1 Ubuntu 24 安装Zabbix agent2 #安装agent库 sudo wget https://repo.zabbix.com/zabbix/7.0/ubuntu/pool/main/z/zabbix-release/zabbix-release_7.0-1ubuntu24.04_all.deb sudo dpkg -i zabbix-release_7.0-1ubuntu24.04_all.deb sudo apt u…

【git使用三】git工作机制与命令用法

目录 git工作机制和相关概念 四个重要区域 分支的概念 上传代码到远程分支的基本流程 克隆代码 仓库同步 开发者如何提交代码到远程仓库分支 1.初始化本地仓库 2.关联本地仓库和远程仓库 创建关联 查看关联情况 如何解除关联 3.推送代码到远程仓库 3.1先下拉远程…

wms海外仓系统多少钱?什么价格才合理,一篇文章介绍清楚

在海外仓竞争异常激烈的今天&#xff0c;提升仓管效率&#xff0c;降低运营成本变得迫在眉睫。尤其是对中小型海外仓和一些刚处于起步阶段的海外仓来说&#xff0c;能选到一个高性价比&#xff0c;功能完善&#xff0c;合作灵活风险低的wms海外仓系统&#xff0c;并不是一件简单…

sqlserver使用链接服务器将本地服务器数据库表数据更新到远程数据库中

需求&#xff1a; 需要将本地sqlserver服务器某个数据库当中的某个表的数据&#xff0c;更新到远程服务器的同名数据库中的同名的表中。 sql代码如下&#xff1a; insert into TableA(Col1,Col2...) select * from [10.14.7.65\CS2014].[NEVTestDB2.0].[dbo].[TableA]将本地…

【CS.PL】Lua 编程之道: 控制结构 - 进度24%

3 初级阶段 —— 控制结构 文章目录 3 初级阶段 —— 控制结构3.1 条件语句&#xff1a;if、else、elseif3.2 循环语句&#xff1a;for、while、repeat-until3.2.1 输出所有的命令行参数3.2.2 while.lua3.2.3 repeat.lua及其作用域 &#x1f525;3.2.4 for.lua (For Statement)…

基于MMrotate旋转目标框检测(安装说明与踩坑记录)

一、简述 MMRotate 是一款基于 PyTorch 的旋转框检测的开源工具箱&#xff0c;是 OpenMMLab 项目的成员之一。里面包含了rcnn、faster rcnn、r3det等各种旋转目标的检测模型&#xff0c;适合于遥感图像领域的目标检测。 基础知识&#xff1a;什么是旋转目标检测 二、MMRotate…

POSEMANIACS图片库下载

POSEMANIACS - Royalty free 3d pose reference for all artists是一个很不错得姿态库图片网站​&#xff0c;可以用作ControlNet的原始图片。 就是加载速度有点慢。一个个手工点击​查看或下载更是费时费力。 点击图片&#xff0c;可以分析地址为 https://www.posemaniacs.c…

雪球产品可能要远离普通人了

最近有消息说&#xff0c;在年初发生大规模敲入事件后&#xff0c;雪球产品的购买门槛可能从300w提升至1000w。 那么在这个时间&#xff0c;了解一下雪球产品到底是什么&#xff0c;运行原理是什么。 第一种 经典雪球 经典雪球比较容易理解&#xff0c;设定好了固定的敲出条件…

安装Windows版Nessus

安装Windows版Nessus 1.前言2.Nessus安装3.安装具体步骤4.文件版许可证 1.前言 之前有安装过Ubuntu版本的Nessus的&#xff0c;这次使用Windows来安装一下。 安装包获取&#xff1a;公众号回复Nessus_Windows。公众号在文章最下面推广中可以看到。 2.Nessus安装 这里直接使…

使用 C# 学习面向对象编程:第 8 部分

抽象方法 亲爱的读者&#xff0c;本文是 OOP 的第四大支柱&#xff0c;也是最后一大支柱。对于 OOP 初学者来说&#xff0c;这很容易让人困惑。因此&#xff0c;我们用非常简单的语言提供了一个示例。 “抽象用于管理复杂性。无法创建抽象类的对象。抽象类用于继承。” 例如…

11_2、多态性:虚函数

虚函数与抽象类 虚函数概念声明虚析构函数 抽象类纯虚函数抽象类 虚函数 概念 在赋值兼容规则中&#xff0c;基类类型的指针指向派生类对象时&#xff0c;通过此指针只能访问从基类继承来的同名成员。 如果我们希望通过指向派生类对象的基类指针&#xff0c;访问派生类中的同…

淘宝评论数据信息接口

淘宝评论API接口是一种用于获取淘宝用户评论信息的接口&#xff0c;联讯数据可以帮助商家和消费者获取到商品的评价信息&#xff0c;以便更好地了解商品的质量和用户体验。以下是关于淘宝评论API接口的一些内容&#xff1a; 一、接口功能 淘宝评论API接口提供了商品评价信息的…

西格玛 ------ 第18个希腊字母学习

名词解释 在数学中&#xff0c;我们把∑作为求和符号使用&#xff0c;用小写字母σ&#xff0c;表示标准差。 ∑符号表示求和&#xff0c;读音为sigma&#xff0c;英文意思为Sum&#xff0c;Summation&#xff0c;汉语意思为“和”“总和”。 例1 公式使用说明&#xff1a;…

数据资产解决方案一站式资料大全:数据资产从业人员必备,附下载。数据资产解决方案,数据资产平台建设方案,数据资产入表,数据资产入表流程,数据资产评估案例

在数据资产的建设中&#xff0c;各种解决方案、标准规范、顶层设计指南等文档资料是不可或缺的参考资源。拥有一套全面、系统的数据资产解决方案资料库&#xff0c;无疑能够为工作提供极大的便利和支持。 一站式数据资产解决方案大全资源包&#xff0c;包含政策汇编、整体解决…