vue2实现拖拽排序效果
1、首先下载 vuedraggable 插件
npm i -S vuedraggable
2、使用方法
<template><div><div style="display: flex; justify-content: center; align-items: center"><div style="width: 120px; height: 60px; line-height: 60px; text-align: center; background-color: skyblue; cursor: pointer" @click="Acttive(1)">医疗资源</div><div style="width: 120px; height: 60px; line-height: 60px; text-align: center; background-color: yellow; cursor: pointer" @click="Acttive(2)">统计指标</div></div><div class="Analysis"><draggable v-model="filterList" chosenClass="chosen" forceFallback="true" group="people" animation="1000" @start="onStart" @end="onEnd"><transition-group class="dra"><!-- <transition-group class="container" name="sort"> --><div class="list" :class="[activeListLeft == item.类别 ? 'activeList' : '']" @click="activeShowList(item, index)" v-for="(item, index) in filterList" :key="item.类别"><div class="list_title">{{ item.类别 }}</div><div class="list_content">{{ item.数量 }}</div></div><!-- </transition-group> --></transition-group></draggable></div></div>
</template><script>
import draggable from 'vuedraggable'
export default {data() {return {list: [{大类: '医疗资源',类别: '总医疗机构数',数量: 152},{大类: '医疗资源',类别: '总数据量',数量: 170725.52},{大类: '医疗资源',类别: '用药记录',数量: 14269.14},{大类: '医疗资源',类别: '手术记录',数量: 15.72},{大类: '医疗资源',类别: '入院记录',数量: 103.56},{大类: '医疗资源',类别: '全息影像',数量: 80976.25},{大类: '医疗资源',类别: '临时医嘱',数量: 14236.28},{大类: '医疗资源',类别: '健康档案数',数量: 103.5},{大类: '医疗资源',类别: '检验报告',数量: 35718.89},{大类: '医疗资源',类别: '护理记录',数量: 17355.15},{大类: '医疗资源',类别: '出院记录',数量: 70.76},{大类: '医疗资源',类别: '长期医嘱',数量: 7516.39},{大类: '医疗资源',类别: '病程记录',数量: 359.87},{大类: '统计指标',类别: '住院中成药收入',数量: 2017.14},{大类: '统计指标',类别: '住院中草药收入',数量: 5703.31},{大类: '统计指标',类别: '住院西药收入',数量: 22047.82},{大类: '统计指标',类别: '住院收入',数量: 90882.28},{大类: '统计指标',类别: '住院人次',数量: 103.56},{大类: '统计指标',类别: '业务总收入',数量: 192353.54},{大类: '统计指标',类别: '门诊中成药收入',数量: 12978.3},{大类: '统计指标',类别: '门诊中草药收入',数量: 16309.27},{大类: '统计指标',类别: '门诊西药收入',数量: 16358.23},{大类: '统计指标',类别: '门诊收入',数量: 101471.27}],filterList: [],activeListLeft: '总医疗机构数'}},components: {draggable},created() {this.activeListLeft = nullthis.filterList = this.list.filter(item => item.大类 == '医疗资源')},methods: {Acttive(item) {console.log(item)if (item == 1) {this.filterList = this.list.filter(item => item.大类 == '医疗资源')} else {this.filterList = this.list.filter(item => item.大类 == '统计指标')}},activeShowList(item, index) {console.log(item)// this.$emit('activeShowListLeft', { item: item, index: index })}}
}
</script><style lang="scss" scoped>
.Analysis {margin-top: 30px;padding: 0 30px;display: flex;flex-wrap: wrap;justify-content: space-between;width: calc(100% - 60px);height: calc(100% - 40px);overflow: auto;.dra {display: flex;flex-wrap: wrap;justify-content: space-between;}.list {cursor: pointer;display: flex;flex-direction: column;align-items: center;justify-content: space-evenly;width: 19%;height: 60px;margin-bottom: 10px;box-shadow: inset 0px 0px 14px 1px #22abff;// box-shadow: inset 0px 0px 16px 1px #ffd061;border-radius: 5px 5px 5px 5px;opacity: 1;text-align: center;user-select: none;padding: 10px 25px;.list_title {width: 130px;font-size: 11px;}.list_content {width: 120px;font-size: 22px;font-family: PingFang SC, PingFang SC;color: #4affbd;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}}// 选中后的背景.activeList {box-shadow: inset 0px 0px 16px 1px #ffd061;}/* 如果最后一行是4个元素 */// .list:last-child:nth-child(3n - 1) {// margin-right: calc(19% + 5% / 4);// }// /* 如果最后一行是3个元素 */// .list:last-child:nth-child(3n - 2) {// margin-right: calc(38% + 10% / 4);// }/* 如果最后一行是2个元素 *///.list:last-child:nth-child(3n - 1) {//margin-right: calc(100% / 3 + 12px);//}
}
</style>
3、参考链接
vue.draggable中文文档
相关文章:
vue2实现拖拽排序效果
1、首先下载 vuedraggable 插件 npm i -S vuedraggable2、使用方法 <template><div><div style"display: flex; justify-content: center; align-items: center"><div style"width: 120px; height: 60px; line-height: 60px; text-align…...
数据结构实验:二叉排序树
题目描述 对应给定的一个序列可以唯一确定一棵二叉排序树。然而,一棵给定的二叉排序树却可以由多种不同的序列得到。例如分别按照序列{3,1,4}和{3,4,1}插入初始为空的二叉排序树,都得到一样的结果。你的任务书对于输入的各种序列,判断它们是否…...
Java类加载流程?
Java类加载过程是指将.class文件中的字节码数据加载到内存中,并生成对应的Class对象的过程。Java类加载器(ClassLoader)负责执行这个任务。Java类加载过程主要包括以下几个步骤: 加载(Loading):…...
Docker从0到1的开始【入门篇】
Docker是一种流行的容器化平台,它允许开发人员将应用程序及其所有依赖项打包到一个标准化的单元中,从而实现快速部署和可移植性。在本文中,我们将列出一些常用的Docker命令,以帮助您更好地了解和使用Docker。 1. 安装Docker 要安…...
@ResponseStatus
目录 概述: 用途: 参数: 注意事项: 自定义异常类: 底层原理: 概述: 在 Spring MVC 中,我们有很多方法来设置 HTTP 响应的状态码其中最直接的方法:使用 ResponseSt…...
高效加载大文件(pandas+dask)
一、仅用pd加载大文件(iterator、chunksize) 要使用Pandas进行高效加载超大文件,我们通常会利用其内置的分块(chunk)处理功能。不过,请注意,Pandas本身并不支持多线程读取文件;它更倾向于单线程中进行块处理…...
游戏引擎分层简介
游戏引擎分层架构(自上而下) 工具层(Tool Layer) 在一个现代游戏引擎中,我们最先看到的可能不是复杂的代码,而是各种各样的编辑器,利用这些编辑器,我们可以制作设计关卡、角色、动画…...
向爬虫而生---Redis 探究篇6<Redis的Bigkey问题介绍>
前言: 随着数据规模的增长,Redis的BigKey问题也开始显现。 BigKey问题主要指的是存储了大量数据的key,这可能给Redis的性能和可用性带来负面影响。当一个key的数据量过大时,会占用宝贵的内存资源,拖慢Redis的响应速度。此外,存储和恢复这些BigKey也会变得困难和耗时,增…...
【开源物联网平台】FastBee认证方式和MQTT主题设计
🌈 个人主页:帐篷Li 🔥 系列专栏:FastBee物联网开源项目 💪🏻 专注于简单,易用,可拓展,低成本商业化的AIOT物联网解决方案 目录 一、接入步骤 1.1 设备认证 1.2 设备交…...
Ubuntu Qt控制终端运行ros
文章目录 gnome-terminalQt 通过QProcess类Qt 通过system gnome-terminal 在Ubuntu中可以使用man gnome-terminal命令查看gnome-terminal的使用指南,也可在ubuntu manuals查看: NAMEgnome-terminal — 一个终端仿真应用.概要gnome-terminal [-e, --c…...
mysql 性能调优参数配置文件
########################################################################### ## my.cnf for MySQL 8.0.x # ## 本配置参考 https://imysql.com/my-cnf-wizard.html # ## 注意: …...
windows右键新建文件没有txt文本文档怎么办?
我碰到此问题,按照以下方法改了注册表, 重启之后就正常了(没有注销,只是单纯重启)。以下方法来自AI: 如果在注册表的 .txt 路径下没有找到 ShellNew 键,你可以尝试手动创建这个键和所需的值来恢…...
已读不回,我又玻璃心了
最近有点上火,3个询盘给我整我无语了,难道我还没修炼到家?玻璃心又出来作祟了? 客户A急火火的发我一个文件,需求内容ios客户端调整,让我按照需求给找个人处理下,我收到后抓紧时间摇人࿰…...
面试经典150题(105-107)
leetcode 150道题 计划花两个月时候刷完之未完成后转,今天(第2天)完成了3道(105-107)150 105.(191. 位1的个数)题目描述: 编写一个函数,输入是一个无符号整数(以二进制串的形式&am…...
javaWebssh药品进销存信息管理系统myeclipse开发mysql数据库MVC模式java编程计算机网页设计
一、源码特点 java ssh药品进销存信息管理系统是一套完善的web设计系统(系统采用ssh框架进行设计开发),对理解JSP java编程开发语言有帮助,系统具有完整的源代码和数据库,系统主要采用B/S模式开发。开发环境为TOM…...
计算机设计大赛 深度学习实现语义分割算法系统 - 机器视觉
文章目录 1 前言2 概念介绍2.1 什么是图像语义分割 3 条件随机场的深度学习模型3\. 1 多尺度特征融合 4 语义分割开发过程4.1 建立4.2 下载CamVid数据集4.3 加载CamVid图像4.4 加载CamVid像素标签图像 5 PyTorch 实现语义分割5.1 数据集准备5.2 训练基准模型5.3 损失函数5.4 归…...
Linux系统编程(六)高级IO
目录 1. 阻塞和非阻塞 IO 2. IO 多路转接(select、poll、epoll) 3. 存储映射 IO(mmap) 4. 文件锁(fcntl、lockf、flock) 5. 管道实例 - 池类算法 1. 阻塞和非阻塞 IO 阻塞 IO:会等待操作的…...
Python与FPGA——全局二值化
文章目录 前言一、Python全局128二、Python全局均值三、Python全局OTSU四、FPGA全局128总结 前言 为什么要进行图像二值化,rgb图像有三个通道,处理图像的计算量较大,二值化的图像极大的减少了处理图像的计算量。即便从彩色图像转成了二值化图…...
《Docker极简教程》--Docker的高级特性--Docker Compose的使用
Docker Compose是一个用于定义和运行多容器Docker应用程序的工具。它允许开发人员通过简单的YAML文件来定义应用程序的服务、网络和卷等资源,并使用单个命令来启动、停止和管理整个应用程序的容器。以下是关于Docker Compose的一些关键信息和优势: 定义…...
tidyverse去除表格中含有NA的行
在tidyverse中,特别是使用dplyr包,去除含有NA的行可以通过filter()函数结合is.na()和any()或all()函数来实现。dplyr是tidyverse的一部分,提供了一系列用于数据操作的函数,使数据处理变得更加简单和直观。 以下是一个简单的例子&…...
uniapp 对接腾讯云IM群组成员管理(增删改查)
UniApp 实战:腾讯云IM群组成员管理(增删改查) 一、前言 在社交类App开发中,群组成员管理是核心功能之一。本文将基于UniApp框架,结合腾讯云IM SDK,详细讲解如何实现群组成员的增删改查全流程。 权限校验…...
初学 pytest 记录
安装 pip install pytest用例可以是函数也可以是类中的方法 def test_func():print()class TestAdd: # def __init__(self): 在 pytest 中不可以使用__init__方法 # self.cc 12345 pytest.mark.api def test_str(self):res add(1, 2)assert res 12def test_int(self):r…...
VM虚拟机网络配置(ubuntu24桥接模式):配置静态IP
编辑-虚拟网络编辑器-更改设置 选择桥接模式,然后找到相应的网卡(可以查看自己本机的网络连接) windows连接的网络点击查看属性 编辑虚拟机设置更改网络配置,选择刚才配置的桥接模式 静态ip设置: 我用的ubuntu24桌…...
搭建DNS域名解析服务器(正向解析资源文件)
正向解析资源文件 1)准备工作 服务端及客户端都关闭安全软件 [rootlocalhost ~]# systemctl stop firewalld [rootlocalhost ~]# setenforce 0 2)服务端安装软件:bind 1.配置yum源 [rootlocalhost ~]# cat /etc/yum.repos.d/base.repo [Base…...
tomcat指定使用的jdk版本
说明 有时候需要对tomcat配置指定的jdk版本号,此时,我们可以通过以下方式进行配置 设置方式 找到tomcat的bin目录中的setclasspath.bat。如果是linux系统则是setclasspath.sh set JAVA_HOMEC:\Program Files\Java\jdk8 set JRE_HOMEC:\Program Files…...
DBLP数据库是什么?
DBLP(Digital Bibliography & Library Project)Computer Science Bibliography是全球著名的计算机科学出版物的开放书目数据库。DBLP所收录的期刊和会议论文质量较高,数据库文献更新速度很快,很好地反映了国际计算机科学学术研…...
华为OD最新机试真题-数组组成的最小数字-OD统一考试(B卷)
题目描述 给定一个整型数组,请从该数组中选择3个元素 组成最小数字并输出 (如果数组长度小于3,则选择数组中所有元素来组成最小数字)。 输入描述 行用半角逗号分割的字符串记录的整型数组,0<数组长度<= 100,0<整数的取值范围<= 10000。 输出描述 由3个元素组成…...
32位寻址与64位寻址
32位寻址与64位寻址 32位寻址是什么? 32位寻址是指计算机的CPU、内存或总线系统使用32位二进制数来标识和访问内存中的存储单元(地址),其核心含义与能力如下: 1. 核心定义 地址位宽:CPU或内存控制器用32位…...
CSS 工具对比:UnoCSS vs Tailwind CSS,谁是你的菜?
在现代前端开发中,Utility-First (功能优先) CSS 框架已经成为主流。其中,Tailwind CSS 无疑是市场的领导者和标杆。然而,一个名为 UnoCSS 的新星正以其惊人的性能和极致的灵活性迅速崛起。 这篇文章将深入探讨这两款工具的核心理念、技术差…...
HTML中各种标签的作用
一、HTML文件主要标签结构及说明 1. <!DOCTYPE html> 作用:声明文档类型,告知浏览器这是 HTML5 文档。 必须:是。 2. <html lang“zh”>. </html> 作用:包裹整个网页内容,lang"z…...
