vxe-table 实现任意列拖拽排序

news/2025/2/28 14:58:34/文章来源:https://www.cnblogs.com/qaz666/p/18601228

vxe-table 实现任意列拖拽排序,通过 column-drag-config.isCrossDrag 启用任意列拖拽排序,除了自身之外。

官网:https://vxetable.cn

启用后可以在不同表头直接任意拖拽,需要注意所有列必须有 field 属性

<template><div><vxe-grid v-bind="gridOptions"></vxe-grid></div>
</template><script>
export default {data () {const gridOptions = {border: true,columnConfig: {drag: true},columnDragConfig: {isCrossDrag: true},columns: [{ field: 'name', title: 'Name' },{ field: 'role', title: 'Role', dragSort: true },{title: '分组1',field: 'group1',children: [{ field: 'sex', title: 'Sex' }]},{title: '分组6',field: 'group6',children: [{title: '分组9',field: 'group9',children: [{ field: 'age', title: 'Age' },{ field: 'address', title: 'Address' }]}]}],data: [{ id: 10001, name: 'Test1', role: 'Develop', sex: 'Man', age: 28, address: 'test abc' },{ id: 10002, name: 'Test2', role: 'Test', sex: 'Women', age: 22, address: 'Guangzhou' },{ id: 10003, name: 'Test3', role: 'PM', sex: 'Man', age: 32, address: 'Shanghai' },{ id: 10004, name: 'Test4', role: 'Designer', sex: 'Women', age: 24, address: 'Shanghai' }]}return {gridOptions}}
}
</script>

https://gitee.com/x-extends/vxe-table

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

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

相关文章

医疗花费预测(保姆级教程)

目标 想要一开始快速抓住一个实验的方向,我觉得一个好方法就是抓住实验目的。 本实验:根据一个人的年龄、性别、BMI、子女个数、是否吸烟和生活地区,预测这个人在医疗方面花费的金额。 线性回归 这里我想问个问题,线性回归是什么,或者说针对于DBSCAN聚类算法之后得到的样本…

在CodeBolcks+wxWidgets+wxSmith下的C++编程教程——用向导创建一个wxWidgets项目(sTetris)

0.前言 我想通过编写一个完整的游戏程序方式引导读者体验程序设计的全过程。我将采用多种方式编写具有相同效果的应用程序,并通过不同方式形成的代码和实现方法的对比来理解程序开发更深层的知识。 了解我编写教程的思路,请参阅体现我最初想法的那篇文章中的“1.编程计划”:…

国城杯

n0ob_un4er 打开题目即可得到源码<?php $SECRET = `/readsecret`; include "waf.php"; class User {public $role;function __construct($role) {$this->role = $role;} } class Admin{public $code;function __construct($code) {$this->code = $code;}f…

基于HMM隐马尔可夫模型的金融数据预测算法matlab仿真

1.程序功能描述 基于HMM隐马尔可夫模型的金融数据预测算法.程序实现HMM模型的训练,使用训练后的模型进行预测。 2.测试软件版本以及运行结果展示MATLAB2022A版本运行 3.核心程序% 初始化预测值矩阵yuce和误差矩阵err yuce = zeros(size(data, 1), lens); err = zeros(…

Mysql的整体架构设计

整体分层连接层 服务层 存储引擎层连接层 客户端要连接到服务器 3306 端口,必须要跟服务端建立连接,那么 管理所有的连接,验证客户端的身份和权限,这些功能就在连接层完成。 服务层 连接层会把 SQL 语句交给服务层,这里面又包含一系列的流程。 比如查询缓存的判断、根据 S…

[Linux]信号

信号 认识信号 什么是信号 信号本质上是一种软件中断,用于通知进程发生了特定的事件。进程接收到信号后,会根据信号的类型采取相应的操作。 拿生活中的红绿灯来举例,当你看到红灯的时候你不会过马路,当变为绿灯时才会通过。但是也有可能在等红灯的时候,此时绿灯亮了而你正…

通过 sealos 部署 k8s 集群

sealos 官方文档 release 背景 sealos 是用于一键部署 k8s 集群的工具。对于不想被太多操作系统细节配置困扰,又想快速装好一套测试k8s集群的同学,无疑是很方便的 网上教程很多,这边自己简单写下在公司机器上安装的过程,绕了一部分坑,帮助大家更快地使用 官方文档还说明 s…

Elasticsearch 系列(八)- 使用NSSM将Kibana安装为Windows服务

本章将和大家分享如何使用NSSM将Kibana安装为Windows服务。本章将和大家分享如何使用NSSM将Kibana安装为Windows服务。废话不多说,下面我们直接进入主题。 一、下载并安装Node.js 我们的 Kibana 是用 Node.js 写的,所以在安装 Kibana 之前我们首先需要先安装一下 Node.js 。 …

SAP配置网络打印机

1、网络打印机 在项目中需要用打印机打印表单,如果不配置网络打印机,通常需要通过连接特定的计算机(如打印服务器)来进行打印,或者使用本地连接的打印机,这样每台计算机可能需要单独配置打印机或安装驱动,导致资源浪费,也不方便。 如果配置了网络打印机,无需本地连接特…

【Java开发】SLF4J 桥接器及其原理,让你的旧代码也可以起飞

前言 虽然在新的项目中,我们一般使用推荐的SLF4J + 日志实现框架(Logback等)组合方式,但是对于一些旧的项目,已经使用了SLF4J之外的日志框架(如Log4j 1.x等),而且这些旧的代码我们无法直接修改源码,如果我们想使用SLF4J的API,那么就需要使用各种SLF4J的桥接器来实现。…

41. css溢出、定位、z-index属性

1. 溢出属性 1.1 概念 内容超出了标签的最大范围 overflow的值与描述:visible 默认值。内容不会被修剪,会呈现在元素框之外。hidden 内容会被修剪,并且其余内容是不可见的。scroll 无论内容是否超出范围,都会显示滚动条。auto 内容没有超出范围,不会显示滚动条。 内容超出…

成员推理攻击的防御方法及简单实现

defense_methods 2024年12月14日更新 前面我们实现了多种模型的成员推理攻击,接下来我们将针对其防御方法及其原理进行一个简单的介绍,并进行简单的代码实现,给用户提供一个详细的帮助文档。 目录 基本介绍 常用方法介绍 简单实现 基本介绍 机器学习中的成员推理攻击指的是攻…